将原始数据与可观测数据隔离开来



这很难用任何例子来解释,因为我正在为一家公司开发应用程序,无法粘贴源代码。我会尽量简单地解释。

该应用程序使用knockout.js和require.js进行模块加载,以及jquery。我定义了一个自定义的bindingHandler,让它调用行,它定义了许多Jquery函数,这些函数基于列表中名称的编辑、删除、更新、取消行为而归属于链接。

  1. 用户将自己的名字输入到绑定到淘汰AppViewModel的输入中。他们单击add按钮将其添加到observableArray中,然后在浏览器中输出。

  2. 一旦他们完成了这项工作,他们可以通过点击编辑来编辑名称,或者通过删除链接将其删除。

  3. 如果他们单击edit,就会显示一个新的div(以前隐藏的),它使他们能够在文本框中编辑自己的名称,并选择update将新名称添加到列表中,或者他们可以取消,将其带回不可编辑的列表。

然而,我的问题是,如果用户在编辑过程中在输入框中更改了姓名,然后选择取消,则仍会添加新姓名,而不是原始姓名。

我已经得到保证,问题只是在这个jQuery函数中:

          $(element).find('.cancelBtn').on('click', function() {      
              $(element).find('.editRow, .detailRow').toggle();
          });  

然而,我不相信toggle或hide函数会在输入框中提交值吗?

输入标签本身绑定到一个名称:

其对应于appViewModel:。。。self.name=ko.obsobservable('');

只是想知道可观察的绑定(双向)是否阻止了名称返回到原始状态,而只是继续观察输入框中输入的更新名称,在单击任何链接之前对其进行更改?

如果使用value绑定将可观察对象绑定到input,则默认情况下,它将在触发更改事件时更新可观察对象。您可以使用"valueUpdate"附加绑定来添加附加事件以触发更新(如keyup),但更改事件总是被添加的。因此,如果用户对您的输入进行编辑,然后离开字段,它将更新可观察到的内容。

如果你想更新/取消对可观察对象的写入,那么你可能想看看我在这篇文章中描述的技术:http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html

最新更新