javascript - 在调用 ko.applyBindings 后向 Knockout viewmodel 添加新属性

Question

在(网络表单)页面中，我有一个按钮可以打开 jqueryui dialogue这是动态加载的。
问题是我希望这个对话成为它自己的 knockout View 模型的主人，但是 View 模型已经在主页中设置了。

我想在 ko.applyBindings 被调用后，不可能向 View 模型添加新属性。
相反，我应该研究另一种设计。但是哪个呢？

• 正在申请 bindings to different parts of the DOM需要我进行一些我希望现在避免的大的重新设计。
• 将所有对话绑定(bind)作为键值列表是可能的，但恕我直言，这不是很优雅。然后主页只需添加一个 vm.dialogueKeyvalueCollection。
• 我目前可能的解决方案是让主窗体添加对话的属性 vm.dialogue.userName() vm.dialogue.searchResult() 然后我的 html 控件 won't bind as they are created after applyBindings is called .目前的解决方案是像这样再次调用 ApplyBindings:ko.applyBindings(vm, $('#dialog-form')[0]); 用于添加HTML。我曾经相信(现在仍然有点相信)要为不同的 DOM 元素调用 applyBindings，一个元素不能嵌套在另一个元素中。绑定(bind)到动态 HTML 已注释 here和 jsfiddled here .
• ?

Answer 1

我用嵌套 View 模型做了很多合成，通常是为了创建对话模式。参见 here以获得完整的答案。

不过，尝试仅使用 with 绑定(bind)可能更简单。您可以在 View 模型上创建一个 dialogueViewmodel 可观察属性。

当你准备显示对话时，只需用一个或多个可观察的键填充它，例如

this.dialogueViewmodel({
  markup: ko.observable("<h1>Kittens!</h1>")
});

并将其包装在 with 绑定(bind)中:

<!-- ko with: dialogueViewmodel -->
  <div id="dialog" title="Basic dialog" data-bind="html: markup">
  </div>
<!-- /ko -->

只要 dialogueViewmodel 为 null，就不会绑定(bind)和渲染任何内容。这只会在您添加对话数据时发生 - 无需再次摆弄 applyBindings。

不过，您可能必须编写自己的绑定(bind)才能与 jQueryUI.dialogue 交互。

第三种选择:我写了一个modal library带有开箱即用的 Knockout 绑定(bind)。这是一个 JSfiddle demo .如果您没有使用 jQueryUI，那可能是一个替代方案；虽然文档并不完美，但我很乐意尽我所能帮助您并在此过程中修复文档。