Javascript 使用主干网和木偶网基于子路由更改布局区域

基本上，我有一个应用程序布局，有一个特定路线的通用页眉和页脚部分。问题是，我希望在子路由被命中时，能够转换此布局的主要内容区域

示例：#产品为主要路线，#产品/：id为子路线

在本模块的控制器中，我使用require.js获取#products路线的视图，并显示带有全局页眉和页脚的平台，作为布局区域的一部分。我还定义了一个内容区域，当一个id包含在路由中时，我想将其转换出来。那么，一旦这个新路由被命中，我如何调用视图上的方法呢？我是否需要在父路由被命中时缓存应用程序的当前状态，然后在子路由被命中时引用它？当子路由被点击并且父路由没有被用户访问时，我是否也需要初始化视图

路由器

define(['backbone', 'marionette', 'c_controllers/Controller'], function ( Backbone,          Marionette, Controller ) {

'use strict';

var AppRouter = Backbone.Marionette.AppRouter.extend({

    appRoutes : {
        // PRODUCT ROUTES
        'product' : 'product',
        'product/:id' : 'showPlp'
    }
});

return new AppRouter({'controller': Controller});

});

define(["backbone", 'marionette'], function (Backbone, Marionette) {

    'use strict';

    return {

        product : function( id ) {

            require(['c_product/product', 
                    'app_views/menu'], function( Product, Menu ) {

                APP.menu.show( new Menu() );
                APP.page.show( new Product() );
            });
        }       
   };
});

控制器

define(['backbone', 'marionette', 'c_controllers/Controller'], function ( Backbone,          Marionette, Controller ) {

'use strict';

var AppRouter = Backbone.Marionette.AppRouter.extend({

    appRoutes : {
        // PRODUCT ROUTES
        'product' : 'product',
        'product/:id' : 'showPlp'
    }
});

return new AppRouter({'controller': Controller});

});

define(["backbone", 'marionette'], function (Backbone, Marionette) {

    'use strict';

    return {

        product : function( id ) {

            require(['c_product/product', 
                    'app_views/menu'], function( Product, Menu ) {

                APP.menu.show( new Menu() );
                APP.page.show( new Product() );
            });
        }       
   };
});

查看

define([
'backbone', 'marionette', 'app_views/globalNav', 
'c_product/productLanding', 'text!productNavTemplate', 'text!productBaseTemplate'], function( Backbone, Marionette, GlobalNav, ProductLanding, ProductNavTemplate, ProductBaseTemplate ) {

var product = Backbone.Marionette.Layout.extend({

    id : 'product',
    template : _.template( ProductBaseTemplate ),
    regions : {

        nav : '#globalNav',
        content : '#view-content',
        footer : '#footer'
    },

    events : {

    },

    initialize : function() {

    },

    onRender : function() {

        // extend the nav view for the template that matches this flow
        var Nav = GlobalNav.extend({ template : _.template( ProductNavTemplate )});

        // show the nav, main content, and footer
        this.nav.show( new Nav() );
        this.content.show( new ProductLanding() );
    }
});

return product;
});

---

我在设计最新的木偶代码库时遇到了完全相同的问题。我想制作一个单页应用程序，它的行为就像一个网站，并允许正确的canonocical路径

我的解决办法如下：

具有呈现基本站点页面的单个木偶布局，即页眉、页脚和空白内容区域

让我的路由器向我的主站点布局发送消息，告诉它要呈现什么内容视图

我使用主干.Wrqr命令在路由器和主站点布局之间发送消息

在浏览器中实现一个点击处理程序，以捕获内部站点链接上的点击，然后指向木偶路由器

有相当多的代码来演示它，所以我在自己的网站上写了一篇完整的文章，该网站也是这种技术的一个工作示例

全文如下：