0

使用 Durandal 2.0.1、Knockout 3.0.0、RequireJS 2.1.10。

以下是背景资料，只是铺垫：

我有一个关于是否将子项加载为视图或视图模型的基本问题。我正在尝试遵循 Durandaljs 网站上打印的设计。我有一个 index.cshtml 页面，其中有一个名为 applicationHost 的 div 元素，它使用 data-main="App/main" 作为 index.cshtml 上的脚本标记的一部分加载 shell.html。

我正在尝试模块化我的标记，所以在 shell.html 中，我有一个 div 加载 header.html 使用：

<!-- ko compose: 'viewmodels/header' -->
<!-- /ko -->

在 header.html 中，我有另一个 div 无法成功加载 guestSummary.html。

guestSummary (guestSummary.js) 的 ViewModel 检索数据并显示一些客人感兴趣的统计数据，我正在尝试使用 Knockout 将其绑定到 guestSummary.html。

由于 guestSummary.html 中的控件需要数据查找和绑定，我想我需要使用以下代码（在 header.html 中）加载 guestSummary.html：

<!-- ko compose: 'viewmodels/guestSummary' -->
<!-- /ko -->

当我尝试这样做时，我收到以下错误消息（来自 Google Chrome 开发人员工具中的控制台选项卡），“未捕获的错误：无法加载组合模块（viewmodels/guestSummary）。详细信息：模型未定义”。

查看 Durandaljs 网站，它说：“我们的导航应用程序中的每个页面都由一个视图和一个视图模型组成。一旦您按照上述方式设置了结构，扩展应用程序所要做的就是删除新的视图模型在 viewmodels 文件夹中以及在 views 文件夹中的适当视图。然后，您只需将它们注册到 main.js 中的路由器。当导航到相应的路由时，路由器将定位您的模块，组合基础设施将看到它它已绑定并插入到 DOM 中”。

上面的指导似乎表明我应该使用视图而不是视图模型，因为我没有尝试导航到 guestSummary.html 页面，而且我似乎不需要将模型添加到路由器并且我'我并没有真正使用路由器导航到 guestSummary.html 页面。

由于 guestSummary 需要数据和数据绑定，我最好尝试将 guestSummary.html 作为 VIEW 加载并将数据绑定到 $parent（或 $parent.parent 等）属性，而不是尝试组合 guestSummary.js文件与 guestSummary.html 文件并加载这两个作为 VIEWMODEL？

有没有更好的方法来做我想要完成的事情？提前感谢您可能愿意分享的任何帮助。

4

1 回答 1

0

如果它们不需要/保证自己的视图模型，您可以将视图绑定到现有的视图模型对象。这在Using Composition中进行了讨论，尽管很简短。

组合显式模型和视图[当一个对象被提供给compose绑定时..]

如果视图属性存在，但没有模型属性，则视图将被解析并绑定到 bindingContext，然后注入到元素中。如果模型和视图属性都存在，那么它们将被绑定并注入到元素中。

例如，显式绑定模型..

compose: {
    view: 'views/guestSummary',
    model: somethingThatResolvesToARelevantModelInThisContext
}

视图中的$root将是model值。

我建议永远不要使用$parent属性，因为它只会让代码变得一团糟。而是在适用的情况下使用绑定名称（例如每个绑定），并且withProperties- 在这种情况下，我什至会withProperties在 $root 上使用以提供具有更多含义的名称。

于 2014-01-20T21:05:33.277 回答