淘汰 'textInput' 和 'Value' 绑定没有捕捉到从 JS 所做的更改

Posted 2023-03-27

【中文标题】淘汰 \'textInput\' 和 \'Value\' 绑定没有捕捉到从 JS 所做的更改

【英文标题】：Knockout 'textInput' and 'Value' binding not catching changes made from JS淘汰 'textInput' 和 'Value' 绑定没有捕捉到从 JS 所做的更改

【发布时间】：2015-09-20 14:34:02

【问题描述】：

使用最新的淘汰赛 3.3.0 和 jquery 1.11.0，从 JS 对输入元素所做的任何更改都不会更新通过 textInput 或 value 绑定到该元素的 observables。

示例模拟代码：

html

<input id="test" type="text" data-bind="textInput: testObs" />

js

$("#test").val("someVal");

小提琴示例： http://jsfiddle.net/whxj5Lf6/

是否有解决方法以便捕获此类更改？

【问题讨论】：

您在单击按钮时使用 jquery 设置值！

@gypsyCoder 是的，这就是按钮的意义所在。它改变了元素的值并显示 observable 没有被更新。无论按多少次都不会更新。

不要使用 jquery，使用敲除点击，绑定到一个函数，然后更新你的模型。正如您在上面所说的，它不会监听 value 或 textInput。因为它很脏，只需手动更新您的模型 I.E myObject.Name('somename') 绑定将显示在实际文本框中

@davethecoder 看来您完全绕过了我无缘无故地提出的问题。我知道您应该通过...可观察值来更新您的可观察值。我正在使用的某些组件使用 jquery 更改输入文本框文本，我无法控制它。为什么JS更改输入文本时“更改”事件不会触发？

【参考方案1】：

Knockout 监听事件以知道值已更改。具体来说，它会响应change事件，很容易用jQuery触发：

$("#test").val("test2").change();

http://jsfiddle.net/mbest/whxj5Lf6/2/

与外部组件交互时，通常最好使用自定义绑定而不是内置的value 或textInput 绑定。例如，这里是custom binding for use with the jQuery UI datapicker。

【讨论】：

是否有我可以挂钩的事件，以便不需要手动调用 .change()？更改元素值的代码是第三方组件，我不想修改。

组件是什么？

它是一个基于jquery的日期范围选择器组件。不知道你为什么关心，我可以修改源代码，我只是不想因为基于事件的方法是一个更好的设计选择，原因有很多。

如果您正在考虑挂钩组件触发的某些事件，请不要打扰，因为它不符合我对源代码的审查。由于我的特殊情况，我的解决方案是修改组件的源代码，但我认为在这里挂钩一些事件是真正的答案，如果你能做到的话。

可能您应该使用自定义绑定（可能已经编写了一个），例如我链接到的示例。

【参考方案2】：

根据 knockoutjs 文档，当 change 事件发生时，observable 的值将更新。

每当用户编辑相关表单控件中的值时，KO 将更新您的视图模型上的属性。 KO总是会尝试 当值被修改并且用户更新您的视图模型 将焦点转移到另一个 DOM 节点（即，在更改事件上），但是 您还可以使用 valueUpdate 参数

只有一个valueUpdate 参数与您的问题标准相匹配。 input 参数，但根据文档它有一些限制......

"input" - 当一个或的值更新你的视图模型 元素变化。请注意，此事件仅由 相当现代的浏览器（例如，IE 9+）。

所以，我认为你最好的选择是采取Michael Best提供的解决方案，手动触发change()事件如下......

$("#test").val("test2").change();

【讨论】：

这里的答案似乎是这个“输入”事件，只要您可以排除旧版浏览器（IE 8 及更低版本）。手动更新变量是一个明显的解决方案，它不能正确回答 IMO 的问题；它实际上并没有让 ko “抓住”任何东西。到时候我会把它标记为答案。

这个答案不正确。 input 事件仅由用户操作触发，而不是由 javascript 代码触发（除非特别触发）。见help.dottoro.com/ljhxklln.php