如何檢測knockout.js中除change事件以外的更改

Question

我正在使用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" /> 

我創建了一個Example Fiddle。看來，當在輸入文本字段執行focusOut事件的觀察到的屬性值被更新。

現在我的問題是我們可以改變觀察到的屬性值更新事件從焦點到別的東西。我還創建了一個保存按鈕。只有在保存按鈕按下時纔有更新observable屬性值的方法。

我想創造一個用戶可以創建並保存其個人資料，並可以編輯保存profile.I正在使用相同的可觀察性的應用程序創建和編輯的形式和這些屬性是可觀察的。所以當用戶編輯它的配置文件時，用戶應該不更新 ，直到用戶按下保存按鈕。這是我的目標。請幫我解決這個問題？

Answer 1

最簡單的做法是爲每個屬性設置一個影子屬性。因此，將一個文本框綁定到文本框時，只需將該值複製到其他屬性，即單擊保存時綁定到其他UI元素的屬性。

在這裏看到：http://jsbin.com/aguyud/5/edit

使用兩個模型和$ .extend從一個複製到其他更簡單的方法：

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

更新，實際上是從頭開始的，似乎不是上班。我嘗試這樣做，而不是：

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

其運作第一次，但複製與$ .extend模型後，似乎它被複制所有綁定了，所以它只能一次！

Answer 2

我會建議有testProperty和testProperty_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 3

另一種方式，沿着什麼馬特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());​ 

這樣，你的價值當你失去對文本輸入框的注意力時，它不會改變，但只有當你提交表單時纔會更新。