백본 발사되지 않음 이벤트

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(); 

이유가 무엇입니까? 명시 적으로 요청하지 않는 한 이벤트를 복사하지 않습니다 모든

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

첫째, clone :

Answer 1

당신은 한 줄에 두 개의 버그가

보통을, 어떤 이벤트 핸들러에 바인딩 원래 요소는 복제본에 복사되지 않습니다. 선택적 withDataAndEvents 매개 변수를 사용하면이 동작을 변경하고 대신 요소의 새 복사본에 바인딩 된 모든 이벤트 처리기의 복사본을 만들 수 있습니다.
[...]
jQuery 1.5부터 으로 withDataAndEvents을 선택적으로 확장하여 복제 된 요소의 모든 하위에 대한 이벤트 및 데이터를 복사 할 수 있습니다.

여기에 <ul>을 복제 중이므로 두 플래그를 모두 true으로 설정하고 싶습니다.

또한 html은 문자열을 반환하며 문자열에 이벤트가 없으므로 이벤트가 두 배가됩니다.

난 당신이 모든 것을 복제하는 이유는 바로 el를 반환해야합니다, 이해가 안 돼요과 함께 할 수 :

return listView.render().el; 

당신이 복제 주장하는 경우에, 당신이 뭔가를 원하는 것 이 :

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

하지만 그건별로 의미없는 작업입니다.

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

대신

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

을 또한, 백본 컬렉션 그렇게하지 Underscore methods mixed in을 많이 가지고 :

BTW

, 'title' 및 'Title' 다른 모델은 그래서 당신이 말하고 싶은 것이다 속성입니다 컬렉션의 models과 직접적으로 엉망진창으로, 현재 말하고있는 곳 :

this.moduleCollection.each(...) 

을 그리고 Loamhoof 언급으로, 0.3.3은 고대의 역사, 백본, 밑줄 및 jQuery를 최신 버전으로 업그레이드하시기 바랍니다 있습니다 : 3,516,

는 말한다. 새로운 기능 (예 : $(this.el) 대신 this.$el, _.bindAll 콜, listenTo ...)을 사용할 수 있도록 변경 로그를 읽어야합니다.

은 (업데이트 라이브러리 포함)

부분적으로 수정 데모 : http://jsfiddle.net/ambiguous/e4Pba/ 나는 또한 alert 전화를 찢어

, 그건 당신이 실수로 무한 루프와 같은 들어갈 경우 큰 혼란을 일으킬 수있는 증오 디버깅 기술이다, console.log이 많이 더 친숙한.