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