Question

我是Backbone JS的新手，我在围绕一个概念时遇到了一些麻烦。

我有一个面板界面，屏幕上一次显示一个面板。每个面板都由自己的视图控制，并附有自己的模型。现在，每个面板都作为“激活器”选项卡，可以单击以显示下一个面板。

在 my 中，这些标签实际上是父面板视图的子视图。没有面板，选项卡不应该存在。但是，所有选项卡必须立即显示在屏幕上，以便用户可以在面板（视图）之间切换。因此，基本上所有面板（无论如何都是模板）都会被加载，但是只有在单击选项卡触发时才会被隐藏，此时它的内容将被填充或更新。

我的问题在架构上带有绑定事件到选项卡视图。所以，例如：

window.PanelTabView=Backbone.View.extend({

    className: 'view panel-tab-view',

    el: '#appPanelTabs',

    tagName: 'li',

    events: {
        'click a': 'test'
    },

    initialize: function() {

    },

    render: function(panel) {
        this.$el.append(this.template(panel.toJSON()));
    },

    test: function(x) {
        console.log(this.cid);
    }

});

因此，单击选项卡时，将针对所有选项卡视图触发每个单击事件。

也许我应该将所有标签视为单一视图，然后呢？但是我喜欢每个标签的概念，从模板中的模块化角度来看它具有自己的视图。

或者我可能错过了一些关于Backbone及其MVC-esque方法的更多信息。

在这种情况下你会做什么？

Answer 1

我对你的问题了解不多，但至少我知道你实际上只有一个按钮。因此，您不应该有多个视图（无论如何都没有意义）。但是，您可以使用模型中的“选定”属性来查看您的视图。所以基本上，当用户点击你的按钮时，你会得到下一个面板，感谢你的收藏（我猜），取消选择前面板（将所选属性设置为false），因此它的视图会消失，然后选择下一个，它的观点会出现。如果你需要，我会稍后提供一些代码。

Answer 2

为什么没有一个只管理选项卡的父视图，然后只需将点击委托给选项卡视图？这将是一个非常简单的方法。

或者，您可以使用路由器，并且在路由器中，您可以根据所采用的特定路线创建单独的选项卡视图。这将允许您的页面可链接。

第一种方法：

ParentView = Backbone.View.extend({

    el : '#your-tabs',

    events : {
        'click #tab1' : 'tab1',
        'click #tab2' : 'tab2'
    },

    tab1 : function() {
        var t1 = new Tab1();
        t1.render();
    },

    tab2 : function() {
        var t2 = new Tab2();
        t2.render();
    }
});

使用路由器：

MyRouter = Backbone.Router.extend({

    routes : {
        "tab/1" : 'tab1',
        "tab/2" : 'tab2'
    },

    tab1 : function() {
        var t1 = new Tab1();
        t1.render();
    },

    tab2 : function() {
        var t2 = new Tab2();
        t2.render();
    }

});

Backbone并不特别关注视图是如何构建的，但这些似乎符合他们的思路。

将所有标签视为单一视图并没有多大意义。仅仅因为一个选项卡上的数据发生了变化，重新渲染所有选项卡将是愚蠢的。

Backbone JS视图理论

2 个答案: