0

我正在使用Durandal模板开发 asp.net MVC。此 Durandal 模板使用 Sammy 路由解决方案。

我想让我的左侧菜单反映可见路线，如下图所示：

在此处输入图像描述

上图是我想要得到的（这不是我目前所拥有的）。

我的解决方案的特殊性是每条路线都应该相同。我的意思是：每条路线都指向“viewmodels/searchTransport”，我想使用一个参数来过滤我的搜索。

所以我想要一个独特的视图/视图模型，但将它们与一种过滤器一起使用来...过滤已经开票的元素，正在进行中...

这是我的第一个想法：

    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>

问题：我的左侧菜单显示所有路由，isActive因为所有这些路由都使用相同的 moduleId。因此，我的菜单中的所有元素都被选中（空白背景，见下图）。这不是我需要的；我只想选择应用了当前过滤器的元素。

问题：如何组织我的路线以便能够重用相同的路线但每个路线具有不同的参数，并且能够在我的左侧菜单中仅选择其中一个？

我希望我很清楚，否则我会尝试澄清。

谢谢。

在此处输入图像描述

4

1 回答 1

2

这是我的解决方案：

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' } },
    ...

下面是我的外壳视图模型：

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

在侧边栏中选择正确元素的技巧（根据当前视图）位于带有 this 的 shell 视图中css: { menuActive: (url == $parent.router.activeRoute().url) }。

希望有一天它可以帮助某人。

于 2013-06-18T13:51:26.290 回答