4

我可能缺少一些基本的东西，但是在构建导航时，我试图在 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，我就没有这个问题，但是，硬编码链接对于应用程序来说是不可行的也不可取的。

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

4

1 回答 1

11

在上面的代码中，确实只有一条路线'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;

});

Step 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 看到。随意分叉并根据自己的喜好进行调整。

于 2013-09-20T09:46:44.873 回答