Backbone刷新視圖事件

Question

在我看來，我沒有聲明this.el，因為我以恐怖的方式創建它，但是這樣事件就不會發生。

這是代碼：

查看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”時沒有任何反應。 謝謝;

Answer 1

在render（）方法結束時，您可以告訴骨干使用delegateEvents（）重新綁定事件。 如果您沒有傳入任何參數，它將使用您的事件哈希。

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

Answer 2

從Backbone.js v0。9。0（2012年1月30日）開始，有一個setElement方法來切換視圖元素並管理事件委托。

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

Backbone.View setElement ： http ： //backbonejs.org/#View-setElement

setElementview.setElement（元件）

如果您想將Backbone視圖應用於其他DOM元素，請使用setElement，它還將創建緩存的$ el引用，並將視圖的委托事件從舊元素移動到新元素。

以這種方式動態創建視圖有其優點和缺點：

優點：

• 所有應用程序的HTML標記都將在模板中生成，因為Views根元素全部由渲染返回的標記替換。 這實際上很好......不再需要在JS中查找HTML。
• 很好的分離關注點。 模板生成100％的HTML標記。 視圖僅顯示該標記的狀態並響應各種事件。
• 渲染負責創建整個視圖（包括它的根元素）與ReactJS渲染組件的方式一致，因此這可能是從Backbone.Views遷移到ReactJS組件的過程中的一個有益步驟。

缺點： - 這些幾乎可以忽略不計

• 這不是在現有代碼庫上進行的無痛過渡。 需要更新視圖，並且所有模板都需要在標記中包含View的根元素。
  • 多個視圖使用的模板可能會有點毛茸茸 - 根元素在所有用例中都是相同的嗎？
• 在調用render之前，視圖的根元素是無用的。 對它的任何修改都將被丟棄。
  • 這將包括在渲染之前在子視圖元素上設置類/數據的父視圖。 這樣做也是不好的做法 ，但它會發生 - 一旦渲染覆蓋元素，這些修改就會丟失。
• 除非重寫Backbone.View構造函數，否則每個視圖都會不必要地委托它的事件並將屬性設置為在渲染期間替換的根元素。
• 如果您的某個模板解析為元素列表而不是包含子元素的單個父元素， 那么您將遇到錯誤的時間 。 setElement將從該列表中獲取第一個元素並丟棄其余元素。
  • 以下是該問題的一個例子： http ： //jsfiddle.net/CoryDanielson/Lj3r85ew/
  • 可以通過解析模板並確保它們解析為單個元素的構建任務，或通過重寫setElement並確保傳入的element.length === 1來緩解此問題。