javascript - 调用 ko.applyBindings 后向 Knockout View 模型添加新属性

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 装订。这是 JSfiddle demo 。如果您不喜欢 jQueryUI，这可能是一个替代方案；虽然文档并不完美，但我很乐意尽我所能帮助您并一路修复文档。