带有子视图的骨干路由答案

【问题标题】：Backbone routing with subviews带有子视图的骨干路由
【发布时间】：2012-07-13 20:27:53
【问题描述】：

我很好奇人们是如何处理这种情况的。我有一个应用程序，它在“/categories”之类的路线上显示类别列表。单击每个类别时，会出现该类别中的产品列表，并且路线会更新为“/categories/1/products”之类的内容。如果我导航一些然后单击后退按钮，我应该能够只呈现前一个类别的产品列表视图，而无需重新呈现类别视图。

但是，我还需要确保当我直接导航到“/categories/2/products”时，会呈现类别列表以及产品列表。

基本上，这意味着路由器对后退/前进历史导航的响应与直接访问 URL 的响应不同。这类问题有通用解决方案吗？

【问题讨论】：

标签： javascript backbone.js

【解决方案1】：

是的，无论是通过直接 url 还是通过路由器导航访问，都必须始终在创建 parent 之后调用子节。

我的解决方法是在我的应用程序中始终有一个主视图，并且路由器总是调用这个主视图。路由器无权访问其他视图。在我的主视图中，我可以处理创建或不创建父视图的情况。

例如，检查路由器如何只调用 MainView，我有一个名为 validateCategories 的方法，如果需要，它会创建父视图：

var MainView = Backbone.View.extend({
    id : 'mainView',
    categories : null,

    events : {
    },

    initialize : function(){
        _.bindAll(this);
    },

    openSection : function(section){
        switch(section){
            case 'categories':
                this.validateCategories();
                break;
            case 'products':
                this.validateCategories();
                this.categories.open( new ProductsView() );
                break;
        }
    },
    validateCategories : function(){
        if( !this.categories ){
          //we create the parent view only if not yet created
          this.categories = new CategoriesView();
        }
    }
});
var mainView = new MainView();
var RouterClass = Backbone.Router.extend({

  routes : {
    "categories"    : "viewCategories",
    "categories/:id/:section"   : "viewProducts"
  },

  viewCategories : function(path) {
    mainView.openSection( 'categories' );
  },

  viewProducts : function(id, section){
    mainView.model.set({
        productId : id,
        section : section,
    });
    mainView.openSection( 'products' );
  }
});

此外，如果您打算从头开始一个新项目，请不要忘记查看这个可以帮助您组织 Backbone.js 项目的扩展： https://github.com/derickbailey/backbone.marionette

【讨论】：