Question

我遇到了viewmodel中observables对knockoutJS数据绑定的问题。如果我尝试访问viewmodel中对象中对象的特定observable（对象）属性，则该值似乎不会更新。

<li data-bind="attr: {id: 'option-' + modalData().modalid }, modal: {template: 'modal-template',  modalid: modalData().modalid, title: modalData().title, options: {heading: modalData().title, trigger: 'click'}, customElement: $('.modal-dropdown') }">
  <a href="#">Open Modal</a>
</li>

要正确初始化我的模态对话框，我需要提供带有配置的options属性。要显示正确的标题，我需要访问modalData（）的标题。当我尝试打开一个不同的模态对话框后出现问题 - 标题的绑定似乎在options-property中无法正常工作。

因此，在单击其他模态后，id属性的绑定会正确更新，但标题将显示最初单击的模式对话框的值。

有谁知道我如何解决这个或我做错了什么？我只能猜测它与我在一个选项内部的一个对象中访问observable这个事实有什么关系并且不知何故让它变得奇怪？

感谢您的帮助！

Answer 1

模式在MVVM paradigm中完成是一项棘手的事情。

许多模态库提供的data-attribute方法应该被视为库的介绍/简单/高级用法。大多数情况下，您应该直接跳到＆＃34; API＆＃34;文档的一部分（当然，除非你的用例是简单的DEAD）。

我总是最成功地将逻辑封装在一个Custom Binding中，你传入＆＃34;选项＆＃34;的对象。

例如：

ko.bindingHandlers.modal = {
    init: function(element, valueAccessor) {
        var options = ko.unwrap(valueAccessor()) || {};

        function onClick(){
            TheModalLibrary.OpenModal(options);
        };

        element.onclick = onClick;
    }
};

你会使用哪种（它甚至看起来更清洁＆＃34;不是吗？）：

<li>
  <a href="#" data-bind="modal: modalData">Open Modal</a>
</li>

在这里要注意重要事项。

如果modalData是可观察的，或者您希望它的值发生变化，那么您需要在模态中反映出来。将init更改为update。当依赖项（valueAccessor）发生变化时，这将强制重新启动绑定。
这是一个完全相同的例子，应该被视为更多的伪代码。如果您向我提供了您正在使用的实际模态库，我很乐意提供更具体的代码示例。
应将基础敲除绑定视为起点。一旦事情开始变得复杂，你应该寻求扩展淘汰提供的工具。一个la，Custom Binding's，Component's和Template's。

最重要的是，面向DOM的东西，如模态，或与JavaScript库的任何集成，通常最适合Custom Binding应用程序。事实上，任何不明确的事情＆＃34; MVVM＆＃34;属于Custom Binding。

KnockoutJS：viewmodel中对象中的Observable Object没有刷新

1 个答案: