Question

我的应用程序有一个主要区域，有时候主区域中的子区域应该可以通过URL访问。主要区域内容由app路由器导致他知道主要区域的功能改变。但是对子视图中的临时区域有什么看法？

例如，网址/docs将显示指向文档的链接列表，/doc/:id应显示列表旁边的文档内容。那么/doc/:id如何在单击列表时呈现内容，并在某些人在新标签页中打开网址时呈现列表和内容时如何呈现内容。

据我所知，每个区域都有两个选项，或者区域管理器会触发应该更改的路径和区域的事件。有关解决此问题的最佳方法的任何提示。

Answer 1

好的我为每个区域解决方案想出了一个路由器。路由器和视图的地图可以轻松配置路由器。当路由匹配时，最初传递的区域将显示视图的新实例。

Here是路由器的高级版本，其中route参数将传递到视图中。

<强>更新

上述解决方案仅在每条路线只注册一次时才有效。如果您第二次注册相同的路由，将覆盖第一个回调。所以我想出了一个解决方案，区域控制器不是直接在路由器上注册路由，而是在全局事件总线（Marionette.Application.vent）上监听route:change事件，路由器触发{{1}这个事件总线上的事件。

RouterController：

route:change

RegionRouter：

// The problem with backbone router is that it can only register one function per route
// to overcome this problem every module can register routes on the RouterController
// the router will just trigger an event on the `app.vent` event bus when ever a registered routes match
define(function() {

  function RouterController(vent) {
    this.vent = vent;
    this.router = new Backbone.Router();
  }

  RouterController.prototype = _.extend({
      //just pass the route that change you wanna listen to
      addRoutes: function(routes) {
        _.each(routes, function(route) {
          this.router.route(
            route,
            _.uniqueId('e'),
            //create a closure of vent.trigger, so when ever the route match it simply trigger an event passing the route
//            _.partial(_.bind(this.vent.trigger, this.vent), 'route:change', route)
            _.bind(function() {
              this.vent.trigger.apply(this.vent, ['route:change', route].concat(_.toArray(arguments)));
            }, this)
          );
        }, this);

      }
    },
    Backbone.Events);

  return RouterController;
});

Backbone.Marionette在路线改变时改变区域

1 个答案: