更新剔除视图模型属性时触发更改事件答案

【问题标题】：Firing change event when knockout view model property is updated更新剔除视图模型属性时触发更改事件
【发布时间】：2023-03-07 16:21:02
【问题描述】：

这是一个 jsfiddle 来显示问题所在：

http://jsfiddle.net/boblauer/BgvV4/

我正在尝试在更新文本字段后触发更改事件。不幸的是，在 subscribe 方法中，文本框的值还没有更新，所以当我发现 change 事件时，它被触发得太早了。

我需要触发更改事件，因为我有不受我控制的依赖于更改事件的第 3 方代码。

有什么建议吗？

【问题讨论】：

是在第三方代码中设置了更改事件，还是只需要调用它？
更改事件处理程序绑定在第 3 方代码中，当我的视图模型更新我的文本框值时，我需要触发它。
也许我没有关注你。如果您想捕获新值（更改为的值），那么 subscribe 方法很好，在您的示例中它正在工作。由于我遗漏了一些东西，您的预期结果是什么？
我希望在 subscribe 方法中，DOM 已经更新，所以我可以触发输入字段的 onchange 事件，并在事件触发时设置新值。

标签： javascript knockout.js

【解决方案1】：

一个简单的解决方案是将您对 $("#text1").change() 的调用包装在一个超时为 0 的 setTimeout 中。这足以让敲除在 jquery 之前对文本框值进行（同步）更新更改处理程序被调用。

我用你的小提琴来演示： http://jsfiddle.net/SuRYa/1//

如果这是您需要做的很多事情，更好的解决方案可能是将此行为包装在自定义绑定中，其中绑定的“更新”回调将触发更新元素上的 jquery 更改事件。

【讨论】：

不是一个理想的解决方案，但我不相信存在一个理想的解决方案，所以我认为这可能是我最好的选择。感谢您的建议。

【解决方案2】：

bmode 是对的，自定义绑定就可以了。虽然这个答案有点晚了，但这里是绑定，以防它帮助任何随后阅读这篇文章的人。它使用 jQuery 更新文本框的值 - 现在更新 DOM 以使 Bob 的第 3 方代码能够工作 - 因此它会触发 change 事件。

ko.bindingHandlers.valueAndFireChange = {
    update: function(element, valueAccessor) {
        var val = ko.unwrap(valueAccessor());
        if (val == undefined) return;
        $(element).val(val);
        $(element).change();
    }
};

这是 Bob 小提琴的更新版本，展示了这一点：

http://jsfiddle.net/BgvV4/17/

我将警报更改为 console.log，因此您需要打开控制台才能看到有用的信息。

【讨论】：