javascript - 启动具有多个视图和路由的主干.js 应用程序的最佳方式

Question

我已经开始使用/学习backbone.js 并且遇到了一些我不太理解的东西。

如果我有一个加载页面，应该在每个页面上加载几个项目，比如菜单。我看到的大多数示例都获取集合，并在路由器中呈现视图。但随后它被锁定在这条路线上。

如果尚未加载，为每个页面加载一些视图的最佳方法是什么？

Answer 1

试试这个小解决方案。

view = new BackboneView({ collection: yourCollection});
 $("body").append(view.render().el); 

在你的主干视图中添加这个

 render: function() {
     $(this.el).html(this.headerTemplate);
     return this;
    }

Answer 2

我使用以下模式：

var App = { // a 'namespace' to hold references to my App's variables to avoid globals
    UI : {}  // references to UI components go here
}

// initialize stuff once the DOM is ready.
$(function(){
    App.UI.menu = App.UI.menu || new MenuView({ el : '#menu' }); // the || is in case it's been defined elsewhere. Just me being cautious;
    App.UI.footer = App.UI.footer || new FooterView({ el : '#footer' });
    App.router = App.router || new Router();
    Backbone.history.start()
});

以上要求MenuView并在初始化时FooterView调用它们的方法。render您还需要在文档中id="menu"包含元素。id="footer"

var MenuView = Backbone.View.extend({
     initiaize : function(){
        this.render();
     },
     render : function(){
        // you'd probably use a template and iterate over an array of links.
        this.$el.html('<ul><li><a href="#">Menu item 1</a></li><li><a href="#">Menu item 2</a></li></ul>');
     }
});

Answer 3

我想，首先，最好编写backbone.history.start()，然后你可以处理每个url更改。当你调用navigate router work，但是调用navigation有两种方式（可能你知道）

  1 -> yourRouterName.navigate("newUrl") : //it doesn't use router, it only added newUrl to `baseUrl`
  2 -> yourRouterName.navigate("newUrl", true) : //it added newUrl to `baseUrl`, router works now.

这两种方式有用，但你应该知道如何使用它