无法使用撰写无容器代码绑定到视图

Question

这与我最近关于一个页面内的多个视图的问题有点有关。我从 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 中使用容器“数据绑定”语法而不是像我试图做的那样无容器已经解决了这个问题。现在的代码是：

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

Answer 1

使用 ko compose: 'viewmodels/navList' 从父视图实例化视图模型和视图。这允许 Durandal 使用 app/viewmodels/ 文件夹中的默认 viewLocator 进行映射。

查看文档了解更多信息

http://durandaljs.com/documentation/Using-Composition/