Question

基本上我有一个应用程序布局，其中包含特定路径的公共页眉和页脚部分。事情是，我希望能够在命中子路径时转换此布局的主要内容区域。

示例：#products是主路由，＃products /：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', '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;
});

Answer 1

在设计我最新的Marionette Code Base时，我遇到了完全相同的问题。我想制作一个表现得像网站的单页应用程序，并允许适当的规范路径。

我的解决方案如下：

有一个Marionette布局呈现基本网站页面，即页眉，页脚和空白内容区域。

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

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

在浏览器中实施点击处理程序以捕获内部网站链接上的点击，然后直接转到Marionette路由器。

有很多代码可以用来演示它，所以我在我自己的网站上写了一个完整的文章，该网站也是这种技术的一个有效例子。

完整的文章是 Changing A Layouts Region Based On A Sub Route Using Backbone And Marionette

使用Backbone和Marionette根据子路径更改布局区域

1 个答案: