Knockout 可观察字段在输入值更改时未更新的问题
Knockout 是一种流行的前端框架，它使用可观察对象来实现双向数据绑定。但是，在使用 Knockout 进行开发时，有时您可能会遇到一个令人困惑的问题：当用户在输入框中更改值时，Knockout 可观察字段未更新。
问题背景
考虑以下代码片段：
-- -------------------- ---- -------
------ ----------- ----------------- -----------
-- ---------------- ---------------
--------
--- --------- - -
---------- ---------------------
--
----------------------------
---------当页面加载时，输入框中显示 "John"，并且 <p> 元素的文本内容也为 "John"。现在假设用户在输入框中修改了文本，使其显示为 "Mary"。然而，如果您在控制台中检查 viewModel.firstName() 的值，您会发现它仍然是 "John"。
这是因为 Knockout 默认情况下不会在输入框的 input 事件上更新可观察对象。它只在输入框失去焦点或按下回车键时进行更新。如果您希望在输入框中每次更改时更新可观察对象，则需要添加一个参数到 data-bind 属性中：
<input type="text" data-bind="textInput: firstName">
现在，每次用户在输入框中键入字符时，firstName 将更新为输入框的值。
深度解析
textInput 绑定实际上是 Knockout 内置的一个扩展程序，它基于浏览器的 input 事件。每次触发 input 事件时，它将获取输入框的当前值并将其分配给可观察对象。
然而，这种实现方式可能会导致性能问题。如果您有多个绑定到可观察对象的输入框，则在每次按键时都会触发许多计算。此外，如果您的应用程序需要支持较旧版本的浏览器（例如 Internet Explorer 10 及更低版本），则该事件可能不可靠。
幸运的是，Knockout 提供了一种更好的方法来处理输入框的值：使用 computed observable。
-- -------------------- ---- -------
------ ----------- ----------------- ---------------------
-- ---------------- ---------------
--------
--- --------- - -
---------- ----------------------
-------------------- -------------
----- ---------- -
------ ----------------------
--
------ --------------- -
---------------------------
-
--
--
----------------------------
---------在这个例子中，我们创建了一个 computed observable，它通过读取和写入 firstName 可观察对象来管理输入框的值。通过这种方式，我们可以确保 firstName 只有在输入框失去焦点或按下回车键时才会更新，从而提高性能。
总结
在使用 Knockout 进行开发时，如果您遇到可观察字段未在输入框值更改时自动更新的问题，请考虑使用 textInput 或 computed observable。这些技术可以确保您的应用程序具有良好的性能和可靠性，并使代码更易于维护。
示例代码：https://jsfiddle.net/ug9scohb/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30416