Knockout.js是一款流行的前端框架，它允许开发人员以声明性的方式维护UI状态和行为。当涉及到表单数据时，Knockout提供了诸如value和textInput之类的绑定器，以便在输入框文本更改时更新视图模型中的属性。
然而，有时候我们需要知道输入框的旧值，以便在更新后执行某些操作。这时候，我们可以使用event绑定器和$data参数来获取旧值。
示例代码
下面是一个基本的示例，其中包含一个输入框和一个计算属性，该计算属性将输入框的文本与旧值进行比较：
-----
------ ----------- ----------------- -------- ------ - ------- ------------- -- --
------
--------
--- --------- - -
-------- ------------------
------- -----
-------------- -------------- ------ -
---------------- ------ - - ------------------
---------------- ------ - - --------------------
---------------- - -------------------
--
-------------- ---------------------- -
-- -------------------- --- ----------------- -
------ ------- --- -------
- ---- -
------ ------- --- -----------
-
--
--
-- -- -------- ----
----------------------------
---------在这个示例中，我们使用event绑定器来监听输入框的change事件，并执行compareValues函数。该函数接受两个参数：data和event。我们只关心event参数，它包含了有关事件发生的所有信息。
在compareValues函数中，我们打印出了旧值和新值，并将新值存储在一个名为oldVal的变量中。然后，我们定义了一个计算属性computedValue，用于比较myValue和oldVal的值是否相等。
深度解析
现在让我们更深入地研究一下这个代码示例。
首先，在输入框上使用value绑定器将输入框文本与视图模型中的myValue属性进行绑定。这意味着每次输入框的文本更改时，myValue都会被更新。
其次，我们使用event绑定器来监听输入框的change事件，并执行compareValues函数。当用户修改输入框的文本并离开输入框时，该函数将被调用，其中event参数包含有关事件的所有信息。
在compareValues函数中，我们首先打印出旧值和新值。我们可以通过event.target.value来获取输入框的当前值。
然后，我们将新值存储在viewModel.oldVal变量中，以便稍后使用。请注意，此变量在视图模型中定义，因此它将始终存在于整个应用程序的生命周期中。
最后，我们定义了一个计算属性computedValue，该属性使用ko.computed函数创建。该函数接受一个回调函数，该函数依赖于观察的属性，即myValue和oldVal。每当其中任何一个值更改时，计算属性都会重新计算其值。
在这种情况下，计算属性使用一个简单的if-else语句来检查myValue和oldVal是否相等。如果它们相等，则返回“Values are equal”，否则返回“Values are different”。
指导意义
通过使用event绑定器和$data参数，Knockout.js允许开发人员获取输入框的旧值，并在值更改时执行某些操作
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30353