Durandal 2.0路由参数化路由（同一路由不同参数）

我可能缺少一些基本的东西，但在构建导航时，我试图在shell中定义多个参数化路由。其思想是，所有这些路由都会将用户传递到相同的视图/虚拟机，但参数将确定ajax调用后显示的内容）。路由本身运行良好，但标题总是从列表中的第一条路由传递过来

activate: function () {
    router.makeRelative({moduleId: 'viewmodels'}).map([
        {
            route: 'grid/:page',
            title: 'Title 1',
            moduleId: 'grid',
            nav: 3,
            hash: '#grid/param1'
        },
        {
            route: 'grid/:page',
            title: 'Title 2',
            moduleId: 'grid',
            nav: 2,
            hash: '#grid/param2'
        },
        {
            route: 'grid/:page',
            title: 'Title 3',
            moduleId: 'grid',
            nav: 4,
            hash: '#grid/param3'
        },
        {
            route: 'grid/:page',
            title: 'Title 4',
            moduleId: 'grid',
            nav: 5,
            hash: '#grid/param4'
        }
    ]).buildNavigationModel();
};

因此，无论用户单击哪个生成的链接，标题始终作为“标题1”返回。导航顺序无关紧要。列表中的第一个物理对象将提供所有链接的标题。如果我将链接硬编码为shell.html并在路由器中使用splat，我不会有这个问题，但是，硬编码链接对于应用程序来说既不可行也不可取

---

所以，问题是，我做错了什么？

在上面的代码中，实际上只有一条路线

'grid/：page'

。通过定义参数化路由，路由器将匹配的所有内容映射到第一条路由。 有关更多信息，请参阅路由器文档

不要使用

router.navigationModel（）

构建您自己的小型导航模型

自上而下的方法：

步骤1使用可选参数

（/：page）

定义

网格

路线

步骤2导航模型

define(['plugins/router', 'knockout', './navItem'], function( router, ko, NavItem ) {

    var ctor = function(){
        this.childRouter = router;
        this.param = ko.observable('');

        this.navigation = ko.observableArray([
           new NavItem({title: 'Title 1', param: 'param1'}),
           new NavItem({title: 'Title 2', param: 'param2'}),
           new NavItem({title: 'Title 3', param: 'param3'}),
           new NavItem({title: 'Title 4', param: 'param4'})
        ]);
    };

    ctor.prototype.activate = function(param){
        this.param('Param: ' + (param || 'no param!'));
    };

    return ctor;

});

步骤3导航项模型

define(['plugins/router'], function( router ) {

    var ctor = function(options){
      this._options = options || {};
      this.init(this._options)
    };

    ctor.prototype.init = function(options){
        this.title = options.title;
        this.param = options.param;
        this.hash = '#extras/optional/' + this.param;
    };

    ctor.prototype.isActive = function(){
      return router.activeInstruction().fragment === this.hash.replace('#', '');
    };

    return ctor;
});

步骤4导航视图

<div class="navbar">
      <div class="navbar-inner">
          <ul class="nav" data-bind="foreach: navigation">
              <li data-bind="css: { active: isActive() }">
                  <a data-bind="attr: { href: hash }, html: title"></a>
              </li>
          </ul>
          <div class="loader pull-right" data-bind="css: { active: childRouter.isNavigating }">
              <i class="icon-spinner icon-2x icon-spin"></i>
          </div>
      </div>
      <div>
          <h3 data-bind="text: param"></h3>
      </div>
  </div>

可在以下位置查看实时版本：。 自由地用叉子叉，根据你的喜好调整

<div class="navbar">
      <div class="navbar-inner">
          <ul class="nav" data-bind="foreach: navigation">
              <li data-bind="css: { active: isActive() }">
                  <a data-bind="attr: { href: hash }, html: title"></a>
              </li>
          </ul>
          <div class="loader pull-right" data-bind="css: { active: childRouter.isNavigating }">
              <i class="icon-spinner icon-2x icon-spin"></i>
          </div>
      </div>
      <div>
          <h3 data-bind="text: param"></h3>
      </div>
  </div>