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

Question

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

dan*_*anh 4 javascript jquery backbone.js underscore.js single-page-application

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

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

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

Run Code Online (Sandbox Code Playgroud)

和骨干观点:

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

Run Code Online (Sandbox Code Playgroud)

到目前为止,我已经研究过在html中使用<%tag来制作部分内容,使得ContentView以某种方式负责在那里呈现不同的东西.我已经拥有但不太了解如何追求的另一个想法是几个Backbone视图轮流负责改变一个div.

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

Answer 1

Ste*_*hen 5

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

让我们说这是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>

Run Code Online (Sandbox Code Playgroud)

这可能是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 **/
});

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	12 年，8 月前
查看次数：	4190 次
最近记录：	12 年，8 月前