Question

我正在使用knockout.js。我创建了一个视图模型，说testViewModel只有一个可观察的属性testProperty。

function testViewModel()
{
  var self = this;

  self.testProperty = ko.observable("Initial");

}

我创建的span反映了testProperty的更改值，input text field可以更改testProperty值。

 <span data-bind="text: testProperty"></span><br />
 <input type="text" data-bind="value: testProperty" />

我创建了一个Example Fiddle。似乎在输入文本字段上执行focusout事件时会更新observable属性值。

现在我的问题是我们可以将可观察属性值更新事件从focusout更改为其他内容。我也创建了一个保存按钮。有没有办法只在按下保存按钮时更新observable属性值。

我正在尝试创建一个应用程序，用户可以在其中创建和保存其配置文件，并可以编辑保存的配置文件。我在创建和编辑表单中使用相同的可观察属性，这些属性是可观察的。因此，当用户编辑其配置文件时，ui不应该更新，直到用户按下保存按钮。这是我的目标。请帮我解决这个问题？

Answer 1

我建议使用testProperty和testProperty_temp。将输入绑定到temp，单击按钮时，将testProperty设置为testProperty_temp

function testViewModel()
{
   var self = this;

   self.testProperty = ko.observable("Initial");
   self.testProperty_temp = ko.obserable("");
   self.save = function() { self.testProperty(self.testProperty_temp()); }
 }

希望这有帮助

Answer 2

另一种方式，与Matt Burland建议的方式相同：

http://jsfiddle.net/mori57/PQxJC/

基本上，将输入和按钮包装在表单中，然后将表单绑定到submit：这是由ViewModel上的方法处理的。看看我内联的评论，但这里是为了那些不想出去参加jsFiddle的人：

<span data-bind="text: testProperty"></span><br />
<!-- wrap the input and button in a form and
   data-bind to submit, with a reference
   to a handler on your viewmodel -->
<form data-bind="submit: updateProfile">
<!-- this must be bound to your shadow value -->
<input type="text" data-bind="value: _tmpTestProperty" />
<button type="submit">save</button>
</form>

并在您的javascript中

function testViewModel()
{
  var self = this;

  self.testProperty = ko.observable("Initial");
  // Create the "shadow" property
  // and prepopulate it with testProperty's value
  self._tmpTestProperty = ko.observable(self.testProperty());

  // Create our form handler
  self.updateProfile = function(val){
    // set the testProperty value to the 
    // value of the shadow property
    self.testProperty(self._tmpTestProperty());
  };

}

ko.applyBindings(new testViewModel());

这样，当您在文本输入框中失去焦点时，您的值不会改变，但只有在您提交表单时才会更新。

Answer 3

您最简单的方法是为每个属性设置 shadow 属性。因此，当您单击保存时，将一个绑定到文本框并仅将值复制到另一个属性，即绑定到其他UI元素的属性。

见这里：http://jsbin.com/aguyud/5/edit

使用两个模型和$ .extend从一个模型复制到另一个模型的更简单方法：

http://jsbin.com/aguyud/7/edit

更新，实际上划伤了，这似乎不起作用。我尝试了这个：

http://jsbin.com/aguyud/22/edit

这是第一次工作，但在使用$ .extend复制模型之后，它似乎也复制了所有绑定，所以它只能运行一次！

如何检测knockout.js中更改事件之外的更改

3 个答案: