主干事件随着引导选项卡消失

Question

我刚刚发现了一个奇怪的行为，其中包含主干视图事件和引导选项卡。

在我的应用程序中，一些视图附加到引导选项卡。

当有人单击选项卡时，附加到选项卡的视图必须（重新）渲染或仅插入选项卡（以反映其他视图中发生的模型更新）。

但是，我刚刚意识到，在单击选项卡后，附加到视图的事件会以某种方式被删除。

我创建了一个 js fiddle 来展示这一点： http://jsfiddle.net/YbM4J/

有什么想法吗？

JS：

window.App = {
        Views: {}
    };

    App.Views.SessionList = Backbone.View.extend({
        tagName: 'select',

        events: {
            'change': 'selectionChanged'
        },

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

        render: function () {
            $(this.el).append('<option value="option1">Option 1</option>');
            $(this.el).append('<option value="option2">Option 2</option>');
            return this;
        },

        selectionChanged: function (e) {
            var value = $(e.currentTarget).val();
            $("#result").html(value + ' is selected');
        }
    });

    $(document).ready(function () {

        var view = new App.Views.SessionList();
        var view2 = new App.Views.SessionList();
        $(".body-container #tab1").html(view.el);
        $(".body-container #tab2").html(view2.el);

        $('.tab').click(function () {
            $(".body-container #tab1").html(view.el);
            $(".body-container #tab2").html(view2.el);
        });
    });

HTML：

<div class='body-container'>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
        <li class="active tab"><a href="#tab1" data-toggle="tab">tab1</a>
        </li>
        <li class="tab"><a href="#tab2" data-toggle="tab">tab2</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="tab1"></div>
        <div class="tab-pane" id="tab2"></div>
    </div>
</div>

<div id='result'></div>

Answer 1

对于重新呈现选项卡，不要更新完整的 html。与您的情况一样，将对象视为可用的闭包，您只需调用 render() 方法。这是更新的小提琴。

http://jsfiddle.net/4FmPp/

$('.tab').click(function(){     
            view.render();
            view2.render();
        });