我正在尝试创建一个视图,其中包含一组动态小部件(不是实际的 durandal 小部件)。每个小部件只是一个标准模块,具有自己的行为和渲染,用户应该能够拖动和重新组织它们以及添加或删除它们。
当前文件结构如下:
- 视图模型
- 主页.js
- 小部件A.js
- 小部件B.js
- 意见
- 主页.html
- 小部件A.html
- 小部件B.html
主页 viewModel 包含一个observableArray
名为 widgets,其中包含小部件的 viewmodel 的名称作为字符串:
var vm = {
activate: activate,
someContext: ko.observable()
widgets: ko.observableArray()
};
问题 1:
如果我在 foreach 中使用 compose 绑定,一切都会按预期工作,例如:
<div data-bind="foreach: widgets">
<div data-bind="compose: $data"></div>
</div>
但是,如果我从 更改foreach
为sortable
$data 似乎不再引用小部件,并且当前主容器视图被无限次渲染。
更新: 为了查看 $data 是否确实发生了变化,我执行了以下操作:
<div data-bind="foreach: widgets">
<div data-bind="text: JSON.stringify($data)"></div>
</div>
实际上,当使用 foreach 时,结果是小部件的 viewModel 名称,但是当使用 sortable 时,它包含家庭的实际 viewModel。
问题2:
我需要将 someContext viewModel 属性发送到小部件,因为它需要该信息进行初始化。我曾尝试使用activationData,但错误消息指出该对象未定义:
<div data-bind="foreach: widgets">
<div data-bind="compose: { model: $data, activationData: someContext }"></div>
</div>
我希望通过以这种方式利用组合来避免必须专门声明对每个小部件类型的依赖关系并在主视图模型中实例化它们,但是尝试这条路线可能会出错。
我的方法基于在此线程上找到的评论: https ://groups.google.com/forum/#!topic/durandaljs/it3q3QePI2M
我对淘汰赛 + durandal 很陌生,因此非常感谢所有输入。