我正在使用 Durandal 开发 SPA，并且我创建了一个用于显示特定页面组件的小部件。继杜兰达尔文档 http://durandaljs.com/documentation/Creating-A-Widget/，小部件位于app/widgets/my-widget并且由组成viewmodel.js and view.html.
现在，我想向同一个小部件添加一个不同的视图 - 实际上，有一个“基本”视图和一个“高级”视图，并在 ViewModel 中带有一个将使用的标志。
我不想创建两个不同的小部件，因为 ViewModel 完全相同，并且我想避免不必要的代码重复。我也不想将两个版本的视图放入view.html并且只根据 ViewModel 中的标志显示其中一个，因为随着稍后将功能添加到小部件中，这将很快成为维护的一场噩梦。
我认为一个答案是做某种查看构图 http://durandaljs.com/documentation/Using-Composition/，其中要组合的视图的名称是根据标志从 ViewModel 返回的，但我不太确定该怎么做。
有人有办法做到这一点吗？我应该有不同的方法来解决这个问题吗？
UPDATE这是我想做的一个例子。有一个小部件workitem用于显示“工作项”。在 ViewModel 中，工作项有一个属性status它可以取值ready, in-progress, complete, or invalid。根据工作项的状态，需要显示的有关它的信息（及其视图）完全不同。我想做的是设置这样的东西：
-widgets
|
|-workitem
| |-viewmodel.js
| |-view-ready.html
| |-view-in-progress.html
| |-view-complete.html
| |-view-invalid.html
...然后根据 ViewModel 中的属性自动选择这些视图之一。
我们对多视图小部件采取的方法是简单地使用if or the visible绑定，并将其绑定到视图模型上保存视图类型（例如“紧凑”、“扩展”、“分组”等）的可观察对象。
对于我们的日期选择器小部件，我们的高级视图是这样的（仅显示其中两个视图）：
</div>
<div data-bind="visible: viewMode() === 'months'">
<div data-bind="compose: {model: 'widgets/datepicker/datepickerMonths', view: 'widgets/datepicker/datepickerMonths', activate: true, activationData: messageChannel }"> </div>
</div>
<div data-bind="visible: viewMode() === 'years'">
<div data-bind="compose: {model: 'widgets/datepicker/datepickerYears', view: 'widgets/datepicker/datepickerYears', activate: true, activationData: messageChannel }"> </div>
</div>
</div>
The viewModeobservable 允许我们在视图之间切换。
我们使用visible在这种情况下具有约束力有两个原因：
- 性能：布局仍然加载在 DOM 中，只是隐藏；
- jQuery clickoutside 插件被混淆了
if绑定（if可以这么说，绑定将 DOM 从用户的鼠标指针下方踢出，并导致 clickoutside 插件相信用户已单击了外部）。
通过上述方法，您的小部件的单个 view.html 文件可以引用多个动态可组合视图。
我提供了一个指向我的日期选择器的公共 SkyDrive（现在的 OneDrive）文件夹的链接，该文件夹完全是为了利用 Durandal 的组合和小部件系统以及 KnockoutJS 而编写的：当我从一个视图切换到另一个视图时日期选择器的视频 http://1drv.ms/1dvLRSO。视图的切换使用上述技术进行。
日期选择器的特点：
- datepicker是一个多视图小部件
- 它组成了一个输入字段和我们的弹出窗口小部件（换句话说，小部件内的小部件）
- 高级视图动态地组成三个不同的视图，并随着用户交互而在它们之间切换
- 它依赖 postal.js 作为客户端消息总线，用于在视图之间路由选择、与父视图协调以及更新输入控件（如果您愿意，可以使用 Durandal 的内置 pub/sub）
- 它使用 jwerty.js 进行键盘管理
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
