调用 ko.applyBindings 后向 Knockout 视图模型添加新属性答案

【问题标题】：Add new properties to Knockout viewmodel after ko.applyBindings is called调用 ko.applyBindings 后向 Knockout 视图模型添加新属性
【发布时间】：2015-04-22 18:02:36
【问题描述】：

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

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

申请bindings to different parts of the DOM 需要我进行一些我希望现在避免的重大重新设计。
将所有对话绑定作为键值列表是可能的，但恕我直言，这不是很优雅。然后主页只需要添加一个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 一定不能嵌套在另一个元素中。绑定到动态 HTML 注释为 here 和 jsfiddled here。
?

【问题讨论】：

经过反复试验，我注意到在 DOM 的新创建部分上调用 applyBindings(vm, domElement) 是可以的。我的猜测是，一旦控件被绑定，它就不能再绑定了；虽然从未绑定过新的 DOM 元素，所以绑定它们是可以的。我想，正如我没有尝试过的那样，新元素/DOM 树必须放在现有的叶子上，因为遍历这个新的 DOM 不能遍历已经绑定的元素。 这完全可以理解吗？

标签： javascript jquery knockout.js webforms

【解决方案1】：

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

不过，尝试使用with 绑定可能会更简单。您可以在您的视图模型上创建一个 dialogueViewmodel 可观察属性。

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

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

并将其包装在 with 绑定中：

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

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

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

第三个选项：我写了一个modal library，它带有一个开箱即用的淘汰赛绑定。这是JSfiddle demo。如果您没有设置 jQueryUI，那可能是另一种选择；虽然文档并不完美，但我很乐意尽我所能帮助您并在此过程中修复文档。

【讨论】：

我不知道width 做了什么，只在文本中看到过，但没有仔细研究过。看起来很有希望。可能是我一直在寻找的答案，但直到我自己测试过。在撰写本文时，我（不幸的是）决定采用更粗略的解决方案。我希望在我继续学习的过程中记得保持更新这篇文章。

【解决方案2】：

你能不能ko.applyBindingsToNode函数来绑定附加的html。

ko.applyBindingsToNode(appendedelement,{ binding options})

希望这会对你有所帮助。

【讨论】：

applyBindingsToNode 是否来自Sharpkit？