Durandal 2.0路由参数化路由(相同路由不同参数)

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();
};

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

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

Answer 1

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

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

顶级关闭方法:

步骤1grid使用可选参数定义路由(/: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看到.随意分叉并根据自己的喜好进行调整.