如何使用主干控制器和视图进行嵌套选项卡（子选项卡）？答案

【问题标题】：How to do nested tabs(sub tabs) using backbone controller and views?如何使用主干控制器和视图进行嵌套选项卡（子选项卡）？
【发布时间】：2013-01-02 09:02:36
【问题描述】：

我是 Backbone 开发的初学者，我正在尝试使用 Backbone 开发生命周期管理。该项目包含四个主要选项卡，每个选项卡中都有子选项卡。我使用控制器、模型和视图等创建了主选项卡。我还添加了导航滑块

一切正常，但我对如何在主选项卡中加载子选项卡感到困惑。我的主要问题是，我在哪里启动子选项卡的控制器？它来自主选项卡控制器的初始化方法吗？

代码概述： - 主控制器为每个选项卡加载集合和模型 - 单击主选项卡时，主控制器显示每个选项卡的视图

// Declare pages collection
var mainpages = new TST.Collections.Pages([ new SCL.Models.Page({
    id : 1,
    name : "Main Tab1",
    route : "!/tab1",
    _controller : TST.Controllers.Tab1
}), new SCL.Models.Page({
    id : 2,
    name : "Main Tab2",
    route : "!/tab2",
    _controller : TST.Controllers.Tab2
}) ], {
    current : 1
});

// show the main layout
var layout = new TST.Layouts.Main({
    collection : mainpages
});
this.options.region.show(layout);

// show the menu
var menu = new TST.Views.Nav({
    collection : mainpages
});
layout.menu.show(menu);

区域在主布局中声明。并使用 -> self.content.show(options.view, self.options.collection.goRight); 显示每个选项卡上的选项卡单击其中self = this

每个标签的控制器是这样的

SCL.Routers.Tab1= Backbone.Marionette.AppRouter.extend({
    appRoutes : {
        "!/request" : "start"
    }
});

  SCL.Controllers.Tab1= TST.Framework.Controller.extend({
    initialize : function(options) {
        this.layout = new TST.Layouts.Tab1();
        this.router = new TST.Routers.Tab1({
            controller : this
        });
    },

    start : function() {
        app.vent.trigger("page:change", {
            view : this.layout
        });
    }
});

那么现在，如何在 Tab1 下加载子标签？

请分享您的想法并帮助我...提前致谢！

【问题讨论】：

我不太确定您的问题是什么：“如何在 Tab1 下加载子标签？？”可能意味着许多不同的事情。这可能意味着“如何将子选项卡 DOM 元素附加到主选项卡 DOM 元素？”或“如何将子选项卡 DOM 元素附加到页面，使其显示在选项卡 DOM 元素下方？”或“我应该如何为我的选项卡/子选项卡设计视图”，或者......你明白了。请尽可能具体地提出您的问题，这样我们会更容易回答。
我无法理解您的第一个问题和第二个问题之间的确切区别，但我认为真正的问题是第二个问题。即，在我的情况下，主选项卡 Tab1 下还有一些其他选项卡。所以当我们移动到 Tab1 时，我们必须看到子选项卡的菜单，并且需要在点击每个子选项卡时看到它的正文内容。

标签： backbone.js marionette

【解决方案1】：

根据 Derick Bailey 的原始文章 (http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/)，我在这里写了一篇关于类似问题的博文：http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/

您应该能够应用博客文章中的内容来解决您自己的挑战，因为它们在本质上非常相似。

【讨论】：