2011-08-31 123 views
10

在我看來,我不聲明this.el因爲我dinamically創建它,但在這樣的事件不火。骨幹刷新視圖事件

這是代碼:

視圖1:

App.Views_1 = Backbone.View.extend({ 

    el:    '#content', 

    initialize:  function() {  
         _.bindAll(this, 'render', 'renderSingle');       
        }, 

    render:   function() {  
         this.model.each(this.renderSingle);     
        }, 

    renderSingle: function(model) { 

         this.tmpView = new App.Views_2({model: model});      
         $(this.el).append(this.tmpView.render().el); 

        } 
}); 

查看2:

App.Views_2 = Backbone.View.extend({ 

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

    render:   function() {  
         this.el = $('#template').tmpl(this.model.attributes);  // jQuery template       
         return this;        
        }, 

    events:   {  
         'click .button' :  'test'     
        }, 

    test:   function() {   
         alert('Fire'); 
        } 

    }); 

}); 

當我點擊 「.button」 什麼也沒有發生。 謝謝;

+0

假設#模板包含一個帶'.button'類的按鈕,這應該起作用。你能發佈你的#模板的內容嗎? –

回答

20

在渲染()方法的末尾,你可以告訴骨幹使用delegateEvents()重新綁定事件。如果你沒有傳入任何參數,它將使用你的事件散列。

render:   function() {  
        this.el = $('#template').tmpl(this.model.attributes);  // jQuery template       
        this.delegateEvents(); 
        return this;        
       } 
1

作爲Backbone.js的v0.9.0的(2012年1月30日),有setElement方法切換的視圖元件和管理事件代理。

render: function() { 
    this.setElement($('#template').tmpl(this.model.attributes)); 
    return this; 
} 

Backbone.View setElementhttp://backbonejs.org/#View-setElement

setElementview.setElement(元素)

如果你想用骨幹視圖適用於不同的DOM元素,使用 setElement,這將還創建緩存$ EL參考和移動 視圖的委託從舊元素事件到新的。



以這種方式動態創建你的看法有它的優點和缺點,但:

優點:

  • 所有應用程序的HTML標記將產生在模板中,因爲Views根元素全部由渲染返回的標記替換。這實際上是一種很好的...不再尋找JS內部的HTML。
  • 關注尼斯分離。模板生成100%的HTML標記。視圖僅顯示該標記的狀態並響應各種事件。
  • 具有呈現負責創建整個視圖(包括它的根元素)是在與該ReactJS呈現部件的方式線,所以這可能是在從Backbone.Views遷移到ReactJS部件的過程的有益的步驟。

缺點: - 這些大多是可以忽略不計

  • 這不會是一個痛苦的過渡,使在現有的代碼庫。意見將需要更新和所有模板都需要具有包括在標記中的視圖的根元素。
    • 多個視圖使用的模板可能會變得毛茸茸 - 所有用例中的根元素是否相同?
  • 在渲染被調用之前,視圖的根元素是無用的。對它的任何修改都將被丟棄。
    • 這將包括父視圖在渲染之前設置子視圖元素上的類/數據。 這樣做也是不好的做法,但它發生 - 一旦渲染覆蓋元素,這些修改將會丟失。
  • 除非你重寫Backbone.View構造,每個視圖將不必要的委託它的事件,並設置屬性到被渲染期間更換根元素。
  • 如果其中一個模板解析爲元素列表,而不是包含子元素的單個父元素,則爲you're going have a bad timesetElement將抓取該列表中的第一個元素,並丟棄其餘的元素。
    • 下面是問題的一個例子,雖然:http://jsfiddle.net/CoryDanielson/Lj3r85ew/
    • 這個問題可以通過一個分析模板,並確保他們解析到一個單一的元素構建的任務減輕,或通過重寫setElement並確保進入element.length === 1