主干中的动态导航答案

【问题标题】：Dynamic Navigation in backbone主干中的动态导航
【发布时间】：2013-04-02 02:43:11
【问题描述】：

我刚开始在一个有点复杂的应用程序上使用 Backbone.js。在其中，我有一个根本没有导航的登录页面，以及一个管理员和用户部分，每个部分都有其导航栏。我的问题是，通过backbone.js 表示动态导航栏的好方法是什么。我考虑过为登录、管理员和用户部分创建三个不同的父视图。在每个视图中，我都可以实例化（或不实例化）适当的导航栏。

【问题讨论】：

标签： javascript backbone.js

【解决方案1】：

我认为你在父视图的想法上是正确的。我要做的是设置一个主容器并使用路由器填写适当的“页面”视图。例如。管理员，用户。在这些父视图中，您将有另外两个视图。一个用于导航栏，一个用于内容。在导航栏视图中，您可以分配您的事件和各种导航按钮。确保正确删除视图和取消委托事件，一个很好的例子是：

Zombie View Management. Undelegating Events

index.html

<div id="main-container">
</div>

路由器.js

app.Router = Backbone.Router.extend({   
routes :{
    "" : "showLogin",
    "user" : "showUser",
},

initialize : function(app){
    this.RM = app.RegionManager;
},

showUser : function(){
    this.RM.show(new app.UserView());
},

showLogin : function(id){
    this.RM.show(new app.LoginView());
}
});

region-manager.js

var app = app || {};

app.RegionManager = {

el : "#main-container",

show : function(view){
    if(this.current)
        this.current.close();
    this.current = view;
    this.current.render();
    $(this.el).html(this.current.el);
}
};

用户视图.js

app.UserPageView = Backbone.extend({
    initialize : function(){
        this.children.nav = new app.UserNavBar();
        this.children.content = new app.UserContent();
    },

    render : funciton(){
        this.$el.html(this.children.nav.render().el);
        this.$el.html(this.children.content.render().el);
    }
});

【讨论】：

您的代码帮了大忙。另外，感谢僵尸视图管理链接。我只知道如果不是因为你，我会为那个问题挠头一段时间。

【解决方案2】：

让您的视图声明它们的标题必需品并让您的视图管理器使用它们。我喜欢用文本和按钮数组定义一个标题属性——每个都有一个事件引用和各种东西，比如一个 enabled() 委托。我的视图管理器在加载和显示此视图时，将读取该属性并将其转换为标题绑定到的模型。如果视图上不存在标题属性，则不会为其创建标题。

【讨论】：