Question

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

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

基本上，这意味着路由器必须对后退/前进历史导航做出不同的反应，而不是直接访问URL。这类问题有一个共同的解决方案吗？

Answer 1

是的，必须在创建父项后始终调用子节，如果直接URL或路由器导航访问它，则无关紧要。

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

示例，检查路由器如何仅调用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

使用子视图的主干路由

1 个答案: