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

Add new properties to Knockout viewmodel after ko.applyBindings is called

本文关键字：新属性 添加 属性 模型 视图 applyBindings ko Knockout 调用      更新时间：2024-02-12

在（webforms）页面中，我有一个按钮可以打开动态加载的jqueryui对话框
问题是，我希望这个对话掌握自己的淘汰视图模型，但视图模型已经在主页中设置好了。

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

  • 将绑定应用到DOM的不同部分将需要我进行一些大的重新设计，我希望现在可以避免
  • 将所有拨号绑定作为键值列表是可能的，但不是很优雅的IMHO。那么主页面将只需要添加一个vm.dialogueKeyvalueCollection
  • 我目前可能的解决方案是让主窗体添加对话框的属性vm.dialogue.userName() vm.dialogue.searchResult()，但我的html控件不会绑定，因为它们是在调用applyBindings后创建的。目前的解决方案是再次像这样调用ApplyBindings：对于添加的HTML调用ko.applyBindings(vm, $('#dialog-form')[0]);。我曾经相信（现在仍然有点相信），要为不同的DOM元素调用applyBindings，一个元素不能嵌套在另一个元素中。此处对绑定到动态HTML进行了注释，此处对其进行了jsfiddle处理

我对嵌套视图模型进行了大量组合，通常是为了创建对话模式。请参阅此处获取完整的答案。

不过，只使用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接口。

第三种选择：我已经编写了一个模态库，它附带了开箱即用的Knockout绑定。这是一个JSfiddle演示。如果您没有设置jQueryUI，那么这可能是一个替代方案；虽然文档并不完美，但我很乐意尽我所能帮助您，并在此过程中修复文档。

是否可以使用ko.applyBindingsToNode函数绑定附加的html。

ko.applyBindingsToNode(appendedelement,{ binding options})

希望这对你有帮助。

相关文章：