Question

我可能遗漏了一些基本的东西，但在构建导航时，我试图在shell中定义多个参数化路径。我们的想法是所有这些路由都会将用户传递到同一个视图/ vm，但参数将决定在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();
};

因此，无论用户点击哪个生成的链接，标题总是以＆＃39;标题1＆＃39;返回。导航顺序无关紧要。列表中的第一个物理对象将提供所有链接的标题。如果我将链接硬编码到shell.html并在路由器中使用splat我没有这个问题，但是，硬编码链接对于应用来说是不可行的。

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

Answer 1

在上面的代码中，确实只有一条路线'grid/:page'。通过定义参数化路由，路由器将匹配grid/:page的所有内容映射到第一个路由。在路由器文档http://durandaljs.com/documentation/Using-The-Router/中查看更多相关信息。

而不是使用router.navigationModel()构建您自己的小型导航模型。

顶级关注方法：

第1步使用可选参数grid定义(/:page)路由。

router
    .makeRelative({moduleId: 'viewmodels'})
    .map([
        {
            route: 'grid(/:page)',
            title: 'grid page',
            moduleId: 'grid',
            hash: '#grid'
        }
    ])
    .buildNavigationModel();

第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>

可以在http://dfiddle.github.io/dFiddle-2.0/#extras/optional看到实时版本。随意分叉并根据自己的喜好进行调整。

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

1 个答案: