С Durandal: все мои меню, использующие один и тот же viewModel, выбираются (isActive)

Question

Я работаю над asp.net MVC с Durandal Шаблон. Этот шаблон Durandal использует решение маршрутизации Sammy.

Я хотел бы, чтобы мое левое меню, чтобы отразить видимые маршруты, как показано на рисунке ниже:

На рисунке выше это то, что я хотел бы получить (это не то, что я так далеко).

Особенность моего решения в том, что каждый маршрут должен быть одним и тем же. Я имею в виду: каждый маршрут указывает на «viewmodels/searchTransport», и я хотел бы использовать параметр для фильтрации моего поиска.

Так что я хотел бы иметь уникальный вид/ViewModel, но использовать их с неким фильтром для ... Фильтрующие элементы уже выставленной в ходе ...

Вот моя первая мысль:

var routes = [ 
    { url: 'searchTransport',  moduleId: 'viewmodels/searchTransport', name: resource.advancedSearch, visible: true, settings: { transport: true, initValue: 'all' } }, 
    { url: 'inProgressTransport', moduleId: 'viewmodels/searchTransport', name: resource.inProgress, visible: true, settings: { transport: true, initValue: 'inProgress' } }, 
    { url: 'finishedTransport', moduleId: 'viewmodels/searchTransport', name: resource.finished, visible: true, settings: { transport: true, initValue: 'finished' } }, 
    { url: 'invoicedTransport', moduleId: 'viewmodels/searchTransport', name: resource.invoiced, visible: true, settings: { transport: true, initValue: 'invoiced' } }, 
    { url: 'flaggedTransport', moduleId: 'viewmodels/searchTransport', name: resource.flagged, visible: true, settings: { transport: true, initValue: 'flagged' } }, 

Это меню отображаются в моих shell.html так:

<ul data-bind="foreach: router.visibleRoutes"> 
    <li data-bind="css: { menuActive: isActive }"> 
     <a data-bind="attr: { href: hash }, html: name"></a> 
    </li> 
</ul> 

проблема: моего левое меню отображаются со всем разгромом es как isActive, потому что все эти маршруты используются с использованием того же moduleId. И, таким образом, все элементы в моем меню выбраны (пустой фон, см. Рисунок ниже). Это не то, что мне нужно; Я хотел бы выбрать только элемент с применяемым текущим фильтром.

Вопрос: Как организовать мои маршруты, чтобы иметь возможность использовать одни и те же маршруты, но с другим параметром для каждого и иметь возможность выбирать только один из них в моем левом меню?

Надеюсь, я понятен, иначе я попробую уточнить.

Спасибо.

Answer 1

Вот мое решение:

var routes = [ 
    // Custom 
    { url: 'welcome',  moduleId: 'viewmodels/general/welcome',  name: rscMenu.welcome,  visible: true, settings: {} }, 
    { url: 'userProfile', moduleId: 'viewmodels/general/userProfile', name: rscMenu.userProfile, visible: true, settings: {} }, 
    // Transport   
    { url: 'generalTransport/:idTran',  moduleId: 'viewmodels/transport/generalTransport', name: rscMenu.newTransport, visible: false, settings: { transport: true } }, 
    { url: 'searchTransport/latestTransport', moduleId: 'viewmodels/transport/searchTransport', name: rscMenu.latestTransport, visible: true, settings: { transport: true, initValue: 'latestTransport' } }, 
    { url: 'searchTransport/inProgress',  moduleId: 'viewmodels/transport/searchTransport', name: rscMenu.inProgress,  visible: true, settings: { transport: true, initValue: 'inProgress' } }, 
    { url: 'searchTransport/finished',  moduleId: 'viewmodels/transport/searchTransport', name: rscMenu.finished,  visible: true, settings: { transport: true, initValue: 'finished' } }, 
    { url: 'searchTransport/invoiced',  moduleId: 'viewmodels/transport/searchTransport', name: rscMenu.invoiced,  visible: true, settings: { transport: true, initValue: 'invoiced' } }, 
    { url: 'searchTransport/flagged',   moduleId: 'viewmodels/transport/searchTransport', name: rscMenu.flagged,   visible: true, settings: { transport: true, initValue: 'flagged' } }, 
    ... 

Ниже моя оболочка ViewModel:

define(function(require) { 

var router = require('durandal/plugins/router'), 
    system = require('durandal/system'), 
    app = require('durandal/app'), 
    logger = require('services/logger'), 
    datacontext = require('services/datacontext'), 
    config = require('modules/config'), 
    rscMenu = require('modules/i18n!nls/menuResource'); 

var transportRoutes = ko.computed(function() { 
     return router.allRoutes().filter(function (r) { 
      return r.visible && r.settings.transport; 
     }); 
}); 
... 

Ниже мой взгляд оболочки:

<div class="page-sidebar"> 
     <ul class="accordion" data-role="accordion" data-bind="accordion: {}"> 
      <li> 
       <div> 
        <ul class="sub-menu light" data-bind="foreach: transportRoutes"> 
         <li data-bind="css: { menuActive: (url == $parent.router.activeRoute().url) }, attr: { id: settings.initValue }"> 
          <a data-bind="attr: { href: (settings.initValue) ? hash.replace(':initValue', settings.initValue) : hash }, html: name"></a> 
         </li> 
        </ul> 
       </div> 
      </li> 
     ... 

Хитрость для Выбрать правый элемент на боковой панели (в соответствии с текущим видом) находится в представлении оболочки с этим css: { menuActive: (url == $parent.router.activeRoute().url) }.

Надеюсь, кому-то это поможет.