制表符在主干，下划线，jquery页面

Tabs in backbone, underscore, jquery page

本文关键字：下划线 页面 jquery 制表符      更新时间：2023-09-26

我正在制作一个玩具应用程序，试图了解这些库，并希望了解如何呈现"选项卡"界面。我想有几个按钮(或链接，无论什么是最常见的)在顶部。当一个选项卡被选中时，它看起来是被选中的，并且页面上的主要内容会改变以显示该选项卡上的内容。

我的学习应用程序现在非常简单:

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

和主干视图:

var ContentView = Backbone.View.extend({
    el: $('.content'),
    // ..
到目前为止，我已经研究过在html中使用<%标签来制作一个局部，使ContentView以某种方式负责渲染不同的东西在那里。另一个想法，我有，但不太知道如何追求是几个骨干视图轮流负责改变一个div。

将非常感谢一些关于规范方法的建议，包括如何显示选项卡按钮以及如何为不同的选项卡清晰地分离视图逻辑。

遵循'关注点分离'模型。你有一个主内容视图，它处理选项卡导航。每当有人点击一个选项卡时，主内容视图应该告诉视图这个选项卡属于它现在是活动的。然后那个子视图从那里处理事情。下面是一些示例代码:

假设这是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 **/
});

有更优雅的方法可以做到这一点，比如引用选项卡所属的模块，然后使用requires或其他模块加载器加载该模块并给它有问题的选项卡。但是，无论哪种方式，不要让一个主要观点做太多。否则你最终会得到一些比它需要的更复杂的东西。

相关文章：