Магистральные Не розжига События

Question

Так вот пример моего приложения в jsfiddle: http://jsfiddle.net/GWXpn/1/

Проблема заключается нажмите событие не увольняют вообще. Я не получаю никаких ошибок JS в консоли.

Во-первых, я хотел отобразить неупорядоченный список с парой, если элементы, каждый элемент должен быть доступен для клика. Это то, что я сделал:

var FooModel = Backbone.Model.extend({}); 

var ListView = Backbone.View.extend({ 
     tagName: 'ul', // name of (orphan) root tag in this.el 
     initialize: function() { 
      _.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here 
     }, 
     render: function() { 
      for (var i = 0; i < 5; i++) { 
       var view = new SingleView({ 
        model: new FooModel() 
       }); 
       $(this.el).append(view.render().el); 
      } 
      return this; // for chainable calls, like .render().el 
     } 
    }); 

     var SingleView = Backbone.View.extend({ 
     tagName: 'li', // name of (orphan) root tag in this.el 
     initialize: function() { 
      _.bindAll(this, 'render', 'click'); // every function that uses 'this' as the current object should be in here 
     }, 
     events: { 
      "click": "click" 
     }, 
     click: function(ev) { 
      console.log("aaa"); 
      alert(333); 

     }, 
     render: function() { 
      $(this.el).append("aaa"); 
      return this; // for chainable calls, like .render().el 
     } 
    }); 

Я хотел бы разделить свое приложение в нескольких модулей (заголовок, тело, колонтитулы), поэтому я создал абстрактную модель и расширить свои модули из него:

var AbstractModule = Backbone.Model.extend({ 
    getContent: function() { 
     return "TODO"; 
    }, 
    render: function() { 
     return $('<div></div>').append(this.getContent()); 
    } 
}); 
var HeaderModule = AbstractModule.extend({ 
    id: "header-module", 
}); 
var BodyModule = AbstractModule.extend({ 
    id: "body-module", 
    getContent: function() { 

     var listView = new ListView(); 

     return $("<div/>").append($(listView.render().el).clone()).html(); 
    } 
}); 
var ModuleCollection = Backbone.Collection.extend({ 
    model: AbstractModule, 
}); 

Затем я просто создал свой основной вид и отобразил все его просмотры:

var AppView = Backbone.View.extend({ 
    el: $('#hello'), 
    initialize: function (modules) { 
     this.moduleCollection = new ModuleCollection(); 
     for (var i = 0; i < modules.length; i++) { 
      this.moduleCollection.add(new modules[i]); 
     } 
    }, 
    render: function() { 
     var self = this; 
     _(this.moduleCollection.models).each(function (module) { // in case collection is not empty 
      $(self.el).append(module.render()); 
     }, this); 
    } 
}); 

var appView = new AppView([HeaderModule, BodyModule]); 
appView.render(); 

Любые идеи почему?

Answer 1

У вас есть две ошибки в одной строке:

return $("<div/>").append($(listView.render().el).clone()).html(); 

Прежде всего, clone не копирует события, если явно не попросите их:

Обычно, любые обработчики событий связаны с исходный элемент не копируется в клон. Необязательный параметр withDataAndEvents позволяет нам изменить это поведение и вместо этого сделать копии всех обработчиков событий, связанных с новой копией элемента.
[...]
В отношении jQuery 1.5, withDataAndEvents можно дополнительно увеличить с помощью deepWithDataAndEvents, чтобы скопировать события и данные для всех детей клонированного элемента.

Вы клонирование <ul> здесь, так что вы будете хотеть установить оба этих флаги true.

Также, html возвращает строку, а строки не имеют событий, поэтому вы удваиваете свое убийство по событию.

Я не понимаю, почему вы клонировать что-нибудь вообще, вы должны просто вернуть el и сделать с ним:

return listView.render().el; 

Если вы настаиваете на клонирование, то вы хотите что-то вроде это:

return $(listView.render().el).clone(true, true); 

но это просто бессмысленно занят работой.

КСТАТИ 'title' и 'Title' разные модели атрибуты так что вы хотите сказать:

console.log(this.model.get("title") + " clicked"); 

вместо

console.log(this.model.get("Title") + " clicked"); 

Кроме того, Магистральные коллекции имеют много Underscore methods mixed in поэтому не беспорядок с коллекцией models напрямую, где вы в настоящее время говорите:

_(this.moduleCollection.models).each(...) 

просто сказать:

this.moduleCollection.each(...) 

И как упоминает Loamhoof, 0.3.3 древняя история, обновление до новых версий Backbone, подчёркивание и JQuery. Вы также должны прочитать журналы изменений, чтобы использовать более новые функции (например, this.$el вместо $(this.el), меньше _.bindAll звонков, listenTo, ...).

Частично исправлена ​​Demo (включая обновленные библиотеки): http://jsfiddle.net/ambiguous/e4Pba/

я вырвал alert вызов, это ненавистны методы отладки, которая может вызвать огромный беспорядок, если вы попали в случайные бесконечные циклы и такие, console.log много дружелюбнее.