Question

我刚刚发现了一个奇怪的beaviour与骨干视图事件和引导标签。

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

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

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

我创造了一个js小提琴，展示了这个： 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();
        });

Backbone事件随bootstrap选项卡消失

1 个答案: