Backbone.js : 내 이벤트가 실행되지 않습니다! 이 작은 코드를 수정하려면 어떻게해야합니까?

Question

나는 배울 것을 시도하고있다 Backbone.js. 나는 한 시간 동안이 일에 매달 렸습니다. 내 이벤트가 발생하지 않을 이유는 ..하지 않는

JSFIDDLE : http://jsfiddle.net/jancarlo000/ejn2J/

JSBIN : http://jsbin.com/efefip/3/edit

볼 ItemView이 섹션에 시작 하나

var ItemView = Backbone.View.extend({ .... 

FULL 코드 :

var Item = Backbone.Model.extend({ defaults: { Task: 'Study!'} }); 
var List = Backbone.Collection.extend({}); 

var MainView = Backbone.View.extend({ 
    tagName: 'ul', 
    className: '', 
    initialize: function(){ 
     _.bindAll(this, 'render'); 
     window.list = new List(); 
     window.list.bind('add', this.render, this); 
    }, 
    render: function(model, collection, options){ 
     var itemView = new ItemView({model:model}); 
     $(this.el).append(itemView.el); 
     $('body').html(this.el); 
     return this; 
    } 
}); 

//-------------- PROBLEM HERE ------------------------------- 
var ItemView = Backbone.View.extend({ 
    tagName: 'li', 
    events: { 
     "click #deleteMe":"deleteMe" //<-- this doesn't fire! 
    }, 
    initialize: function(){ 
     _.bindAll(this, 'render'); 
     this.render(); 
    }, 
    render: function(){ 
     $(this.el).append(this.model.get('Task') + 
           '<button id="deleteMe">Delete Me</button>'); 
      //WHY WON'T THIS FIRE!!! 
     return this; 
    }, 
    deleteMe: function(e){ 
     console.log('called deleteMe'); 
     $(this.el).remove(); 
    } 
}); 
//------------------------------------------------------------ 

$(function(){ 

var app = new MainView(); 
var first = new Item({Task:'Learn JavaScript'}); 
var second = new Item({Task:'Learn HTML5'}); 
var third = new Item({Task:'Learn Backbone.JS'}); 
var fourth = new Item({Task:'Learn .NET MVC'}); 
list.add([first, second, third, fourth]); 

}); 

Answer 1

기본보기 render에서 $('body').html(this.el);을 사용하면보기 및 해당 이벤트 핸들러를 언 바운드 요소로 바꿉니다. I 월 경우

이 광고를 제거하여 초기화 방법 본체에 메인 뷰 EL을 추가 몇 의견을 목적으로하는 결과를

var MainView = Backbone.View.extend({ 
    tagName: 'ul', 
    className: '', 
    initialize: function(){ 
     _.bindAll(this, 'render'); 
     window.list = new List(); 
     window.list.bind('add', this.render, this); 
     $('body').append(this.el); 
    }, 
    render: function(model, collection, options){ 
     var itemView = new ItemView({model:model}); 
     $(this.el).append(itemView.el); 
     console.log($(this.el)); 

     return this; 
    } 
}); 

http://jsfiddle.net/ejn2J/6/

를 제공하고

• 보기에서 귀하의 컬렉션을 생성하지 마십시오 귀하의 초기화 코드에서 만들고 그것을보기에 전달,보기 모델 및 귀하의 애플 리케이션의 컬렉션을 생성에 대한 책임을지지해서는 안
• 컬렉션을 참조해야 할 수도 있습니다. 메인 뷰 렌더링을 사용하여 고독한 모델이 아닌 전체 목록을 다시 렌더링해야합니다.이 컬렉션의 목적은 컬렉션의 UI 표시를 유지하는 것입니다. 나중에 모델을 추가/편집/삭제하고 그 표현을 새로 고침
• 메인 뷰를 뷰 코드의 본문에 연결하지 않고 메모리에 뷰를 작성한 다음 상위 뷰에 해당 엘을 추가하면 더 빠르고 쉽습니다. 또한이 문제는 I에 의해 해결 될 수

http://jsfiddle.net/ejn2J/7/

Answer 2

나중에 이동할 this.delegateEvents(); 당신의 견해가 지어진 후에