javascript - 每次呈现主干 View 时是否应该使用 jQuery 选择相同的元素

Question

是否有必要选择相同的 DOM 元素并为呈现的每个主干 View 对其执行某些操作？任何时候只有一个 View 存在。

例如，假设必须在特定主干 View Product 上使用 Bootstrap 的 Tabs(tabbable 插件)。在 render 函数中包含 tabbable 插件的初始化代码是否正确？

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:first').click(function(){
    console.log('hey!')'
}

我是否将它放在该 View 的 render 函数中？如果我这样做，如果多次呈现 View ，它不会创建许多 click 事件监听器吗？

Answer 1

您需要在初始化方法中绑定(bind)事件监听器，而不是在渲染中。除非您打算多次重新呈现 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);
    }

});