0

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

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

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

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

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 式方法的更多内容。

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

4

2 回答 2

0

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

于 2013-04-04T19:02:53.517 回答
0

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

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

第一种方法：

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 对如何构建视图并不特别固执己见，但这些似乎符合他们的思路。

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

于 2013-04-04T20:23:40.213 回答