Backbone.js的 - 简单的观点

Question

我试图运行Backbone.js的 这里很简单的观点是代码：

(function($){ 

    window.templateLoaderView = Backbone.View.extend({ 

     events: { 
      'click #add_contact': 'loadTaskPopup' 
     }, 

     initialize: function() { 
      alert('templateLoaderView - initialize'); 
      _.bindAll(this, 'render'); 
     }, 


     render: function() { 
      alert('templateLoaderView - render'); 
     }, 

     loadTaskPopup: function() { 
      alert('templateLoaderView - loadTaskPopup'); 
     } 
    }); 

})(jQuery); 
$(document).ready(function() { 
    window.templateLoaderView = new templateLoaderView(); 
}); 

<div id="add_contact">CLICK HERE</div> 

当页面加载时，它会提醒这alert('templateLoaderView - initialize');，但是当我点击的div ， 什么都没发生。 你能告诉我我做错了什么吗？

Answer 1

有几件事情出错了。

• 当您创建视图，它创建this.el作为一个DIV，但它的根源并非是什么
• 你的事件试图勾上视图的DIV，它没有内部#add_contact
• 你没有得到render的提醒，因为没有任何事情叫render。

最简单的办法让你的点击处理程序的工作就是告诉视图附加到哪个元素：

window.templateLoaderView = new templateLoaderView({el: $("body") }); 

进一步说...

虽然，你可能希望你的DIV能够在你的视图内创建...它会有点像这样：

(function($){ 

    window.templateLoaderView = Backbone.View.extend({ 

     template: _.template('<div id="add_contact">CLICK HERE</div>'), 

     events: { 
      'click #add_contact': 'loadTaskPopup' 
     }, 

     render: function() { 
      $(this.el).html(this.template()); 
      return this; 
     }, 

     loadTaskPopup: function() { 
      alert('templateLoaderView - loadTaskPopup'); 
     } 
    }); 

})(jQuery); 

$(document).ready(function() { 
    window.templateLoaderView = new templateLoaderView(); 
    $("body").append(window.templateLoaderView.render().el); 
});