骨干視圖點擊事件未觸發

Question

這是代碼：

var view = Backbone.View.extend({
  el:'#comment',
  template:'',
  initialize:function(){
    this._getTemplate();
    this.render();
  },
  event:{
    'click #submit_btn' : 'submit'
  },
  _getTemplate:function(){
    $.ajax({
      ...
    });
  },
  render:function(){
    this.$el.html(this.template);
  },
  submit:function(event){
    alert('click');
  }
});

我使用ajax從服務器獲取html模板，並且效果很好。 我加載模板沒有問題。

這是我要插入模板的div。

<div id="comment">...</div>

這是模板。 我只是顯示簡單的結構。

<div>...</div>
<button id="submit_btn">submit</button>
<div>...</div>

有人可以幫我解決嗎？

Answer 1

看來事件字符串設置正確，並且render函數做正確的事。 我看到的一個問題是，根據Backbone View Extend文檔，應該對“初始化”功能進行“初始化”。

參考： http : //backbonejs.org/#View-extend

Answer 2

事件未觸發，因為當嘗試將事件綁定到DOM元素時（即，在構造View時），DOM元素不存在。 從骨干文檔 ：

在調用初始化之前，Backbone會在實例化時自動附加事件偵聽器。

由於#submit_btn DOM元素匹配器不返回任何內容，因此不會綁定任何事件。

您在initialize()方法中獲取模板的技術會出現問題。 在大多數基於OO的開發模式中，對象的構造函數不應執行大量工作，並且當構造函數完成時，應完全初始化返回的實例。 骨干網視圖在這方面沒有什么不同。 此處編寫的構造方法會嘗試做很多工作，但是將模板作為對象創建的一部分來獲取並沒有任何好處。 實際上也有一些危害：如果最終創建多個View實例怎么辦？ 即使內容完全相同，您最終還是要多次獲取模板。

強制任何一種XHR同步也是有問題的。 在同步請求期間，瀏覽器的主線程正忙於等待響應。 在此示例中，如果模板花費的時間超過幾百毫秒，則您的應用程序將對用戶顯示為“凍結”。 這提供了非常差的用戶體驗。 異步代碼可能會讓您覺得更復雜，但是如果您要構建一個基於JS的應用程序，則該應用程序的復雜度甚至會降至最低。 由於Javascript（主要是單線程），因此異步執行成為任何應用程序必不可少的工具。

更好的解決方案是將模板嵌入到托管HTML頁面內容中， 或者使用JS模塊化技術（RequireJS，CommonJS等）將模板與需要模板的模塊有效地打包在一起。