javascript - 每次渲染 Backbone 视图时是否应该使用 jQuery 选择相同的元素

Question

是否有必要为每个渲染的 Backbone View 选择相同的 DOM 元素并对其进行处理？任何时候都只有一个视图存在。

例如，说 Bootstrap 的 Tabs（可选项卡插件）必须在特定的主干 View 上使用Product。在函数中包含可选项卡插件的初始化代码是否正确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:first').click(function(){
    console.log('hey!')'
}

我应该把它放在那个视图的render函数中吗？click如果我这样做，如果视图被多次呈现，它不会创建许多事件侦听器吗？

Answer 1

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

});