Question

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

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

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

Answer 1

尝试这个小解决方案。

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

在Backbone View中添加此内容

 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路由器工作时，有两种方式可以调用导航（可能是您了解它）

  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.

双向有用，但你应该知道如何使用它

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

3 个答案: