Question

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

Answer 1

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

Zombie View Management. Undelegating Events

的index.html

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

router.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());
}
});

区域-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);
}
};

用户view.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);
    }
});

Answer 2

让您的观点声明其标题必需品并让您的视图管理器使用它们。我喜欢用text和buttons数组定义一个header属性 - 每个都有一个事件引用和各种事情，比如enabled（）委托。在加载和显示此视图时，我的视图管理器将读取属性并将其转换为标题绑定的模型。如果视图中不存在标题属性，则不会为其创建标题。

骨干中的动态导航

2 个答案: