与骨干路由子视图 [英] Backbone routing with subviews

问题描述

我很好奇的人如何处理这样的情况。我有一个在像/类别的路线显示的类别列表的应用程序。当点击在每个类别中，出现的产品中该类别的列表，并且所述路线的更新类似/类别/ 1 /产品。如果我浏览了一些，然后单击后退按钮，我应该能够只呈现为previous类产品列表视图，无需重新渲染类别查看。

I'm curious how people deal with a situation like this. I have an application that at a route like "/categories" displays a list of categories. When each category is clicked on, a list of products in that category appears, and the route updates to something like "/categories/1/products". If I navigate some and then click the back button, I should be able to just render the products list view for the previous category, without re-rendering the categories view.

不过，我还需要确保，当我直接导航到/分类/ 2 /产品类别列表和产品列表的呈现方式。

However, I also need to ensure that when I navigate directly to "/categories/2/products" the categories list as well as the products list is rendered.

基本上，这意味着路由器必须有不同的反应，而不是直接访问URL来向后/向前历史记录导航。是否有这类问题的常见解决方案？

Basically, it means the router would have to respond differently to back/forward history navigation than to accessing a URL directly. Is there a common solution to this type of problem?

推荐答案

是的，孩子们段必须始终创建父后调用，如果它是通过直接URL或通过路由器访问导航。没有问题

Yes, children sections must be called always after parent is created, no matters if it was accessed by direct url or through a Router navigation.

我的解决方法，这是始终有一个主视图在我的应用程序，而路由器总是调用这个主视图。路由器不具有访问其他意见。在我的主视图我能胜任在创建或不父视图的情况。

My workaround to this is always have a main View in my applications, and the router always call this Main View. The Router does not have access to other Views. In my Main View I could handle the case where a parent view is created or not.

例如，检查路由器如何只要求的MainView有我有，如果需要的创建父视图的方法命名validateCategories：

Example, check how the Router only calls MainView and there I have a method named validateCategories that create the parent View if needed:

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

这篇关于与骨干路由子视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！