0

我正在使用 knockout.js。我创建了一个testViewModel只有 1 个可观察属性的视图模型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" />

我创建了一个示例小提琴。似乎在输入文本字段上执行 focusout 事件时，可观察属性值已更新。

现在我的问题是，我们能否将 observable 属性值更新事件从 focusout 更改为其他内容。我还创建了一个保存按钮。有什么方法可以仅在按下保存按钮时更新可观察的属性值。

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

4

3 回答 3

4

我建议有 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()); }
 }

希望这可以帮助

于 2012-10-19T15:16:54.660 回答
2

另一种方法，与马特·伯兰德（Matt Burland）建议的思路相同：

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

基本上，将您的输入和按钮包装在一个表单中，并将表单绑定到提交：这由您的 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());​

这样，当您失去对文本输入框的关注时，您的值不会改变，而只会在您提交表单时更新。

于 2012-10-19T15:49:11.927 回答
1

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

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

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

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

更新，实际上从头开始，这似乎不起作用。我尝试了这个：

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

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

于 2012-10-19T15:13:23.140 回答