使用 Backbone 和 Marionette 基于子路由更改布局区域答案

【问题标题】：Changing a Layouts region based on a sub-route using Backbone and Marionette使用 Backbone 和 Marionette 基于子路由更改布局区域
【发布时间】：2014-03-05 05:03:03
【问题描述】：

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

示例：#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;
});

【问题讨论】：

标签： javascript backbone.js routes marionette

【解决方案1】：

在设计我最新的 Marionette 代码库时，我遇到了完全相同的问题。我想制作一个行为类似于网站的单页应用程序，并允许正确的规范路径。

我的解决方案如下：

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

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

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

在浏览器中实现点击处理程序以捕获对内部站点链接的点击，然后将点击定向到 Marionette 路由器。

为了演示它涉及到很多代码，所以我在自己的网站上写了一篇完整的文章，该网站也是这种技术的一个工作示例。

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

【讨论】：