跟蹤Knockout模型中的更改，並在輸入發生變化時觸發CSS的更改

Question

我有一個Knockout視圖，包含大約50種各種輸入。當一個變化是由下面的代碼

self.Changed = ko.computed(function() { 
    return ko.toJS(self.Outing); 
}); 

然後訂閱更改的功能保存模型回服務器對模型所做的，我已經跟蹤。我想要完成的是，當用戶更改單個輸入時，它會在該輸入上觸發一個css綁定，以突出顯示它，以便用戶知道他/她所做的更改。我怎樣才能做到這一點與個別訂閱每個可觀察的財產？

Answer 1

有幾種方法可以處理這樣的事情。一個方便的方法可能是一個自定義綁定，它抓取原始值並設置一個針對計算的css綁定，該計算查看原始值與當前值。

也許是這樣的：

ko.bindingHandlers.changedCss = { 
    init: function(element, valueAccessor, allBindings) { 
     var original, isDirty, data, cssClass, binding; 

     data = allBindings().value; 
     original = ko.utils.unwrapObservable(data); 
     isDirty = ko.computed({ 
      read: function() { 
       return ko.utils.unwrapObservable(data) !== original; 
      },    
      disposeWhenNodeIsRemoved: element 
     }); 

     cssClass = ko.utils.unwrapObservable(valueAccessor()); 
     binding = { css: {} }; 
     binding.css[cssClass] = isDirty; 

     ko.applyBindingsToNode(element, binding);  
    }       
}; 

你會用它喜歡：<input data-bind="value: first, changedCss: 'changed'" />

所以，這個想法是，我們尋找什麼value被綁定反對，併成立了計算觀察到導通給我們一個骯髒的國旗這個屬性。然後，使用傳遞給該綁定的類名稱以編程方式添加一個css綁定。

http://jsfiddle.net/rniemeyer/PCmma/

或者，您可以創建一個擴展，它可以讓你從視圖模型邊添加這個骯髒的跟蹤。這會給你一些額外的靈活性，比如重置跟蹤的能力（考慮當前值是乾淨的）。對於初學者來說，你可以這樣做：

ko.subscribable.fn.trackDirtyFlag = function() { 
    var original = this(); 

    this.isDirty = ko.computed(function() { 
     return this() !== original; 
    }, this); 

    return this;  
}; 

然後，使用它像：this.first = ko.observable("John").trackDirtyFlag();

http://jsfiddle.net/rniemeyer/JtvWd/

那麼你可以做的事情一樣添加reset方法，設置original等於電流值。

如果您的目標只是爲了染髒字段，那麼自定義綁定可能是一個不錯的選擇，因爲您根本不需要更改視圖模型。