Question

这是与我最近关于一个页面内多个视图的问题相关的种类。我从Durandal样本敲除shell开始，并试图将左侧的导航菜单解压缩到它自己的“navList.html / navList.js”视图/ viewmodel。

我创建了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>

Answer 1

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

查看文档以获取更多信息

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

无法使用compose containerless代码绑定到视图

1 个答案: