在一个(webforms)页面中,我有一个按钮打开一个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一定不能嵌套在另一个DOM中。绑定到动态HTML时用here注释,而jsfiddled here

最佳答案

我经常使用嵌套视图模型进行合成,通常是为了创建对话模态。有关完整的答案,请参见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 -->


只要dialogueViewmodelnull,就不会绑定和呈现任何内容。这仅在添加对话数据时发生-无需再次摆弄applyBindings

不过,您可能必须编写自己的绑定才能与jQueryUI.dialogue接口。

第三种选择:我写了一个modal library,它带有开箱即用的Knockout绑定。这是JSfiddle demo。如果您未在jQueryUI上进行设置,则可能是另一种选择。尽管文档并不完美,但我很乐意为您提供任何帮助,并一路修复文档。

09-11 18:20