Durandal 2.0路由参数化路由（相同的路由不同参数） [英] Durandal 2.0 routing parameterized routes (same route different parameter)

问题描述

我可能缺少一些基本知识，但是在构建导航时，我试图在shell中定义多个参数化路线。想法是所有这些路由都将使用户通过相同的视图/ vm，但是该参数将确定ajax调用后显示的内容。路由本身运行良好，但是标题始终从列表中的第一条路由传递。

I am probably missing something basic, but when building navigation I am attempting to define multiple parameterized routes in the shell. The idea is that all of these routes will pass the user through to the same view/vm, but the parameter will determine content that is displayed after an ajax call). The routing itself works well, but the title is always passed through from the first route in the list.

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，则不会出现此问题，但是，对链接进行硬编码不可行，也不适合该应用程序。

So, regardless of which of the generated links a user clicks on, the Title is always returned as 'Title 1'. Nav order does not matter. The first physical object in the list will supply the title for all links. If I hard code the links into shell.html and use a splat in the router I do not have this problem, however, hard coding the links is not feasible nor desirable for the app.

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

So, the question is, what am I doing wrong?

推荐答案

在上面的代码中，实际上只有一条路由'grid /：page'。通过定义参数化的路由，路由器会将匹配 grid /：page 的所有内容映射到第一条路由。
请参阅路由器文档 http://durandaljs.com/documentation/ using-The-Router / 。

In the code above there's truly only one route 'grid/:page'. By defining a parameterized route the router maps everything the match grid/:page to the first route. See more about that in the router documentation http://durandaljs.com/documentation/Using-The-Router/.

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

Instead of using the router.navigationModel() build your own small navigation model.

最高级别的方法：

第1步带有可选参数（/：page）的网格路由。

Step 1 Defining a grid route with an optional parameter (/: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 。
可以随意分叉并根据自己的喜好进行调整。

Live version can be seen at: http://dfiddle.github.io/dFiddle-2.0/#extras/optional. Feel free to fork and adjust to your liking.

这篇关于Durandal 2.0路由参数化路由（相同的路由不同参数）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！