Question

我正在制作一个玩具应用程序，试图了解这些库，并希望了解我将如何呈现“标签”界面。我想在顶部有几个按钮（或链接，最常见的）。选择一个时，它会显示为已选中，并且页面上的主要内容会更改以显示该选项卡上的内容。

我的学习应用程序目前非常简单：

<body>
    <div class="content"></div>
</body>

骨干观点：

var ContentView = Backbone.View.extend({
    el: $('.content'),
    // ..

到目前为止，我已经研究过在html中使用＆lt;％标签来制作部分内容，使得ContentView以某种方式负责渲染不同的内容。我已经拥有但不太了解如何追求的另一个想法是几个Backbone视图轮流负责改变一个div。

肯定会欣赏有关规范方法的一些建议，包括如何显示标签按钮以及如何为不同标签清晰地分隔视图逻辑。

Answer 1

遵循“关注点分离”模式。您有一个主内容视图，用于处理选项卡导航。只要有人点击选项卡，该主内容视图就应该告诉视图该选项卡属于它现在处于活动状态。然后该子视图从那里处理事物。这是一些示例代码：

让我们说这是HTML：

<div id="tabContainer" class='tabs'>
    <div class='tab' id="content1Tab"></div>
    <div class='tab' id="content2Tab"></div>
    <div class='tab' id="content3Tab"></div>
</div>
<div id="contentContainer">

</div>

这可能是javascript。

ContentView = new (Backbone.View.extend({}
    events: {
        'click .tab': 'openTab'
    },

    el: $("#tabContainer"),

    tabViews: {},

    openTab: function (e) {
        var el = $(e.currentTarget);
        $("#contentContainer").children().detach();

        if(!this.tabViews[el.attr('id')]) {
            this.tabViews[el.attr('id')] = this.createTabViewForEl(el);
        }

        this.tabViews[el.attr('id')].render($("#contentContainer"));
    },

    createTabViewForEl: function (el) {
        var tab;
        switch(el.attr('id')) {
            case "content1Tab":
                tab = new FirstContentTab();
                break;
            /* etc */
        }
        return tab;
    }
))();

FirstContentTab = Backbone.View.extend({
    render: function (targetEl) {
        this.setElement($("#someContentEl"));
        this.$el.appendTo(targetEl);
    }
    /** stuff like loading in content for tab, or making a monkey dance when it opens **/
});

有更优雅的方法，比如引用选项卡所属的模块，然后使用requirejs或其他模块加载器加载该模块并为其提供相关选项卡。但是，无论哪种方式，都不要让那个主视图做得太多。否则你最终会得到一些比它需要的更复杂的东西。

主干，下划线，jquery页面中的选项卡

1 个答案: