启动具有多个视图和路线的bone.js应用程序的最佳方法

Question

我已经开始使用/学习ribs.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

我猜想，首先，最好编写ribs.history.start（），然后再处理每个url更改。 当您调用navigate路由器工作时，但是有两种方法可以调用导航（可能您知道）

  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.

两种方法都很有用，但是您应该知道如何使用它