Question

使用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中，我有一个使用以下方法加载header.html的div：

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

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

guestSummary的ViewModel（guestSummary.js）检索数据并显示客户感兴趣的一些统计信息，我试图使用Knockout绑定到guestSummary.html。

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

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

当我尝试这样做时，我收到以下错误消息（来自Google Chrome开发人员工具中的控制台标签），“未捕获错误：无法加载撰写模块（viewmodels / guestSummary）。详情：未定义模型”。< / p>

查看Durandaljs网站，它说：“我们的导航应用程序中的每个页面都包含一个视图和一个视图模型。一旦你设置了如上所述的结构，所有扩展应用程序的都在下降viewmodels文件夹中的新视图模型以及views文件夹中的相应视图。然后，您只需将其注册到main.js中的路由器。当相应的路由导航到时，路由器将找到您的模块，组合基础结构将看到它绑定并插入DOM“。

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

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

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

Answer 1

如果视图不需要/保证自己的视图模型，则可以将视图绑定到现有视图模型对象。这虽然简要地在Using Composition中进行了讨论。

撰写显式模型和视图 [当对象提供给compose绑定时..]

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

例如，要显式绑定模型..

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

视图中的$root将为model值。

我建议从不使用$parent属性，因为它只会将代码变成混乱。相反，在适用的情况下使用绑定名称（例如每个绑定）和withProperties - 在这种情况下，我甚至会在$ root上使用withProperties来提供更有意义的名称。

加载为View还是ViewModel？

1 个答案: