0

データベーススターターキットから durandal 2 で子ルートを作成しようとしましたが、成功しませんでした。

以下に示すように、静的コンテンツでレンダリングすることに成功しましたが：

define(['plugins/router', 'knockout'], function (router, ko) {
var childRouter = router.createChildRouter()
    .makeRelative({
        moduleId: 'sectionGroups',
        fromParent: true
    }).map([
        { route: ['', 'child1'], moduleId: 'pages/child1', title: 'child1', nav: true },
        { route: 'child2: moduleId: 'pages/child2', title: 'child2',  nav: true },
        { route: 'child3', moduleId: 'pages/child3', title: 'child3',  nav: true }
    ]).buildNavigationModel();

return {
    router: childRouter
};
});

ただし、データベースからメニューを動的に出力できませんでした。私は何か間違ったことをしていますか？以下の私のコードを見てください

define(['plugins/router', 'knockout','services/oasisManager', 'services/logger'], function (router, ko, om, logger) {

var pageRoutes = getPageRoutes();

var childRouter = router.createChildRouter()
    .makeRelative({
        moduleId: 'sectionGroups',
        fromParent: true
    })
    .map(pageRoutes)
    .buildNavigationModel();

function getPageRoutes() {
    var pageRoutes = [];
    om.getOasis(134).done(function() {
        ko.utils.arrayForEach(om.activeOasis.PageRoutes, function(item) {
            var nav = true;
            if (item.Route == '') {
                nav = false;
            }
            pageRoutes.push({
                route: item.Route,
                moduleId: item.ModuleId,
                title: item.Title,
                nav: nav
            });
        });
    });
    return pageRoutes;
}

return {
    router: childRouter
};
});

Html はほとんど同じように見えます。助けてください

<div class="container-fluid knockout-samples">
<div class="row-fluid">
    <div class="span2 well">
        <ul class="nav nav-list">
            <li class="nav-header">Basic Examples</li>

            <!--ko foreach: router.navigationModel-->
            <li data-bind="css: { active: isActive }">
                <a data-bind="attr: { href: hash }, text: title"></a>
            </li>
            <!--/ko-->
        </ul>
    </div>
    <div class="span10">
        <!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
    </div>
</div>

4

1 に答える 1

0

あなたのコードで起こっていることgetPageRoutesは、空の配列を返していることだと思います。ルートのリストの約束を返す必要があります。おそらくこのようなものが必要です。

function getPageRoutes() {
    return om.getOasis(134).done(function(routes) {
        var pageRoutes = [];
        ko.utils.arrayForEach(routes, function(item) {
            var nav = true;
            if (item.Route == '') {
                nav = false;
            }
            pageRoutes.push({
                route: item.Route,
                moduleId: item.ModuleId,
                title: item.Title,
                nav: nav
            });
        });
        return pageRoutes;
    });
}

om.getOasis(134)ルートのリストに対しての約束を返すと仮定しています。

これが役立つかどうかはわかりませんが、これはあなたが達成したいことと同様のことをするためにデュランダルアプリで持っているものです. Q promises ライブラリを使用して、webapi への非同期呼び出しを処理します。 

define(['plugins/http', 'services/logger'], function (http, logger) {
    "use strict";
    var getRoutes = function () {
        return http.get("routes/availableRoutes").then(function (data) {
            logger.log("Routes Loaded", data, 'services/routes', false);
            return data;
        });
    };
    var routes = {
        getRoutes: getRoutes
    };
    return routes;
});

呼び出しコードは次のようになります。

return routes().then(function (availableRoutes) {
    return router.makeRelative({
        moduleId: 'sectionGroups',
        fromParent: true
    }) 
    .map(availableRoutes) 
    .buildNavigationModel()
    .activate();
});
于 2014-04-09T00:13:42.397 に答える