これは、1 つのページ内の複数のビューに関する最近の質問に関連しています。Durandal サンプル ノックアウト シェルから始めて、左側のナビゲーション メニューを独自の "navList.html/navList.js" ビュー/ビューモデルに抽出しようとしました。
navList.html と navlist.js を作成しました。
<ul class="nav nav-list">
<li class="nav-header">Basic Examples</li>
<!--ko foreach: introSamples-->
<li data-bind="css: { active: isActive }">
<a data-bind="attr: { href: hash }, text: title"></a>
</li>
<!--/ko-->
<li class="nav-header">Detailed Examples</li>
<!--ko foreach: detailedSamples-->
<li data-bind="css: { active: isActive }">
<a data-bind="attr: { href: hash }, text: title"></a>
</li>
<!--/ko-->
</ul>
define(['plugins/router', 'knockout'], function (router, ko) {
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'ko',
fromParent: true
}).map([
{ route: '', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro' },
{ route: 'helloWorld', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro', nav: true },
{ route: 'clickCounter', moduleId: 'clickCounter/index', title: 'Click Counter', type: 'intro', nav: true },
{ route: 'simpleList', moduleId: 'simpleList/index', title: 'Simple List', type: 'intro', nav: true },
{ route: 'betterList', moduleId: 'betterList/index', title: 'Better List', type: 'intro', nav: true },
{ route: 'controlTypes', moduleId: 'controlTypes/index', title: 'Control Types', type: 'intro', nav: true },
{ route: 'collections', moduleId: 'collections/index', title: 'Collection', type: 'intro', nav: true },
{ route: 'pagedGrid', moduleId: 'pagedGrid/index', title: 'Paged Grid', type: 'intro', nav: true },
{ route: 'animatedTrans', moduleId: 'animatedTrans/index', title: 'Animated Transition', type: 'intro', nav: true },
{ route: 'contactsEditor', moduleId: 'contactsEditor/index', title: 'Contacts Editor', type: 'detailed', nav: true },
{ route: 'gridEditor', moduleId: 'gridEditor/index', title: 'Grid Editor', type: 'detailed', nav: true },
{ route: 'shoppingCart', moduleId: 'shoppingCart/index', title: 'Shopping Cart', type: 'detailed', nav: true },
{ route: 'twitterClient', moduleId: 'twitterClient/index', title: 'Twitter Client', type: 'detailed', nav: true }
]).buildNavigationModel();
return {
router: childRouter,
introSamples: ko.computed(function () {
return ko.utils.arrayFilter(childRouter.navigationModel(), function (route) {
return route.type == 'intro';
});
}),
detailedSamples: ko.computed(function () {
return ko.utils.arrayFilter(childRouter.navigationModel(), function (route) {
return route.type == 'detailed';
});
})
};
});
...これらは、元の index.html および index.js ファイルとほとんど同じコピーです。
次に、index.js を次のように変更しました。
define(['ko/navList'], function(nav) {
return {
router: nav.router
};
});
そしてこれにindex.html：
<div class="container-fluid knockout-samples">
<div class="row-fluid">
<div class="span2 well">
<!--ko compose: {view: navList,
transition: 'entrance'} -->
<!--/ko-->
</div>
<div class="span10">
<!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
</div>
</div>
</div>
...これは大きな変更ではありません。この時点で私が達成しようとしているのは、いじくり回すことによる教育だけです。実際の例を分解/再構築できれば、アプリを構築する方法を理解する上でさらに一歩前進できると思いました。
もちろん、これがうまくいかないのは、navList へのバインディングです。ビューとして navList を探しに行くように言われているにもかかわらず、私が知る限り、それを index.js モデルの一部として扱っているように見えるので、コンソール ウィンドウに次のように表示されます。
Binding ko/index
Object {router: Object, __moduleId__: "ko/index"}
system.js:75
Unable to parse bindings.
Bindings value: compose: {view: navList,
transition: 'entrance'}
Message: navList is not defined;
View: ko/index;
ModuleId: ko/index
私がここで持っている基本的な理解の問題を説明してください。
解決策: pw kad が示唆したように、index.html でコンテナーレスの代わりにコンテナーの "data-bind" 構文を使用することで、問題が修正されました。コードは次のとおりです。
<div class="container-fluid knockout-samples">
<div class="row-fluid">
<div class="span2 well" data-bind="compose: 'ko/navList'"></div>
<div class="span10">
<!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
</div>
</div>
</div>