KnockoutJS：视图模型中对象中的可观察对象不刷新答案

【问题标题】：KnockoutJS: Observable Object in object in viewmodel not refreshingKnockoutJS：视图模型中对象中的可观察对象不刷新
【发布时间】：2017-09-04 15:30:50
【问题描述】：

我在 viewmodel 中的 observables 中遇到了敲除JS 数据绑定的问题。如果我尝试在我的视图模型中访问对象中的特定可观察（即对象）属性，则该值似乎不会更新。

<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>

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

所以点击不同的modal后，id属性的绑定会正确更新，但是heading会显示最初点击的modal dialog的值。

有谁知道我该如何解决这个问题或我做错了什么？我只能猜测这与我正在访问选项内的对象内部的可观察对象有关，并且不知何故让它变得很奇怪？

感谢您的帮助！

【问题讨论】：

请提供minimal reproducible example 证明问题。
您能否向我们展示足够多的代码，以便我们自己尝试并帮助您？
总旁注。但是，你在data-bind 中做得太多了。创建一个pureComputed，它返回一个{}，为attr 绑定提供数据。

标签： knockout.js

【解决方案1】：

模态在MVVM paradigm 中是一件棘手的事情。

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

我总是最成功地将执行此操作的逻辑封装在 Custom Binding 中，您将其传递给“选项”对象。

例如：

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

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

        element.onclick = onClick;
    }
};

你会使用哪个（它甚至看起来“更干净”，不是吗？）：

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

在此列出一些需要注意的重要事项。

如果modalData 是可观察到的，或者您期望它的值会发生变化，这就是您需要在模态中反映的内容。将init 更改为update。这将强制绑定在依赖项 (valueAccessor) 更改时重新评估。
这是一个完全人为的例子，应该被视为更多的伪代码。如果您向我提供您正在使用的实际模态库，我很乐意提供更具体的代码示例。
碱基敲除绑定应该被视为一个起点。一旦事情开始变得更加复杂，您应该寻求扩展淘汰赛提供的工具。唉，Custom Binding's、Component's 和 Template's。

从这一切中最大的收获是，面向 DOM 的东西，如 modal 的，或与 JavaScript 库的任何集成，通常最适合 Custom Binding 应用程序。事实上，任何不是明确“MVVM”的东西都属于Custom Binding。

【讨论】：