淘汰赛 - 可以与Durandal组合

时间:2013-10-22 01:25:53

标签: knockout.js hottowel knockout-sortable durandal-2.0

我正在尝试创建一个视图,其中包含一组动态小部件(不是真正的durandal小部件)。 每个小部件只是一个标准模块,它有自己的行为和渲染,用户应该能够拖动和重新组织它们,以及添加其他小部件或删除它们。

当前的文件结构如下:

  • 的ViewModels
    • home.js
    • widgetA.js
    • widgetB.js
  • 视图
    • home.html的
    • widgetA.html
    • widgetB.html

home viewModel包含一个名为widgets的observableArray,其中包含窗口小部件的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时,结果是widget的viewModel名称,但是当使用sortable时,它包含了home的实际viewModel。

问题#2:

我将需要将someContext viewModel属性发送到窗口小部件,因为它需要该信息进行初始化。我尝试过使用activationData,但错误消息表明该对象未定义:

<div data-bind="foreach: widgets">
    <div data-bind="compose: { model: $data, activationData: someContext }"></div>
</div>

我希望通过以这种方式利用组合来避免必须专门声明对每个窗口小部件类型的依赖关系并在home viewModel中实例化它们,但是我尝试这条路径可能是错误的。

我的方法基于此线程上的评论: https://groups.google.com/forum/#!topic/durandaljs/it3q3QePI2M

我是淘汰+ durandal的新手,因此非常感谢所有输入。

1 个答案:

答案 0 :(得分:1)

实际上我发现这对我来说是一个令人尴尬的错误。我忘了在js包中包含 jqueryUI knockout-sortable 。当这些组件丢失时,会导致奇怪的行为。

我在这里留下答案,以防它对其他人有用。