每次渲染骨干視圖時是否應該使用jQuery選擇相同的元素

Question

是否有必要選擇相同的DOM元素並對每個呈現的Backbone View進行一些處理？ 任何時候僅存在一個此視圖。

例如，必須在特定的主干View Product上使用Bootstrap的Tabs（可插拔的插件）。 將Tabbable插件的初始化代碼包含在render函數中是否正確？

render: function() {

    this.$el.html( this.template( this.model.toJSON() ) );

    // Activate Twitter Bootstrap Tabs
    $('.tab-bar').tab();
    $('.tab-bar .tab:first').tab('show');
    $('.tab-bar .tab').click(function(e) {
        e.preventDefault();
        $(this).tab('show');    });

    return this;
}

或者有沒有辦法只調用一次此選擇器，它將為所有.tab-bar類的元素（包括尚未存在的元素） .tab-bar 。

同樣，如果我想要第一個標簽上的點擊處理程序

$('.tab:first').click(function(){
    console.log('hey!')'
}

如何將其放置在該視圖的render函數中？ 如果我這樣做，如果多次渲染視圖，是否會創建許多click事件偵聽器？

Answer 1

您需要在initialize方法（而不是在render中）中綁定事件偵聽器。 除非您要重新渲染DOM元素不止一次。

編輯

window.myView = Backbone.View.extend({

    events: {
        'click #someElementID': 'do_something',
    },

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

    .....

    do_something: function(e){
        console.log("A click was made!", e.currentTarget);
    }

});