0

Durandalテンプレートを使用して asp.net MVC に取り組んでいます。このデュランダル テンプレートは、Sammy ルーティング ソリューションを使用しています。

下の図に示すように、左側のメニューに表示されているルートを反映させたいと思います。

ここに画像の説明を入力

上の写真は私が取得したいものです（これは私が今のところ持っているものではありません）.

私のソリューションの特徴は、すべてのルートが同じであることです。つまり、すべてのルートが「viewmodels/searchTransport」を指しており、パラメータを使用して検索をフィルタリングしたいと考えています。

だから私はユニークなview/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>

問題:isActiveすべてのルートが同じ moduleId を使用しているため、左側のメニューにすべてのルートが表示されます。したがって、メニューのすべての要素が選択されます (空白の背景、下の図を参照)。これは私が必要としているものではありません。現在のフィルターが適用された要素のみを選択したいと思います。

質問:同じルートを再利用できるようにルートを編成する方法を教えてください。ただし、それぞれに異なるパラメーターを使用し、左側のメニューでそれらの 1 つだけを選択できるようにします。

私が明確であることを願っています。そうでなければ、明確にしようとします。

ありがとう。

ここに画像の説明を入力

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

以下は私のシェル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>
        ...

サイドバーで (現在のビューに従って) 正しい要素を選択するためのトリックは、シェル ビューの this にありcss: { menuActive: (url == $parent.router.activeRoute().url) }ます。

いつか誰かの役に立てば幸いです。

于 2013-06-18T13:51:26.290 に答える