[javascript] 檢測Knockout視圖模型的更改


Answers

您可以訂閱要監視的屬性:

myViewModel.personName.subscribe(function(newValue) {
    alert("The person's new name is " + newValue); 
});

當personName更改時,這將發出警報。

好的,所以你想知道模型什麼時候發生變化......

var viewModel = … // define your viewModel

var changeLog = new Array();  

function catchChanges(property, value){
    changeLog.push({property: property, value: value});
    viewModel.isDirty = true;
}

function initialiseViewModel()
{
    // loop through all the properties in the model
    for (var property in viewModel) {

        if (viewModel.hasOwnProperty(property)) { 

            // if they're observable
            if(viewModel[property].subscribe){

                // subscribe to changes
                viewModel[property].subscribe(function(value) {
                    catchChanges(property, value);
                });
            }
        }
    }
    viewModel.isDirty = false;
}

function resetViewModel() {
    changeLog = new Array();  
    viewModel.isDirty = false;
}

(沒有測試過 - 但你應該明白這個想法)

Question

當然這是一個非常容易回答的問題,但有一種簡單的方法可以確定淘汰視圖模型的任何屬性是否已經改變?




您可以使用下面的插件:

https://github.com/ZiadJ/knockoutjs-reactor

例如,代碼將允許您跟踪任何viewModel中的所有更改:

ko.watch(someViewModel, { depth: -1 }, function(parents, child) { 
    alert('New value is: ' + child());
});

PS:截至目前,這不適用於嵌套在數組中的可訂閱者,但支持它的新版本正在進行中。

更新:示例代碼已升級為與v1.2b一起使用,後者增加了對數組項和可訂閱的可訂閱屬性的支持。




我已經改編了@Brett Green代碼並對其進行了擴展,以便我們可以使用AcceptChanges,將模型標記為不髒並且有更好的方法將模型標記為可跟踪。 這是代碼:

var viewModel = {
    name: ko.observable()   
};

ko.track(viewModel);

http://jsfiddle.net/david_freire/3HZEu/2/




考慮如下視圖模型

function myViewModel(){
    var that = this;
    that.Name = ko.observable();
    that.OldState = ko.observable();
    that.NewState = ko.observable();

    that.dirtyCalcultions - ko.computed(function(){
    // Code to execute when state of an observable changes.
});
}

綁定數據後,可以使用ko.toJS(myViewModel)函數存儲狀態。

myViewModel.Name("test");
myViewModel.OldState(ko.toJS(myViewModel));

您可以將視圖模型中的變量聲明為計算的observable

that.dirtyCalculations = ko.computed(function () {});

當視圖模型中的任何其他可觀察對象發生更改時,將輸入此計算函數。

然後,您可以將兩個視圖模型狀態進行比較:

that.dirtyCalculations = ko.computed(function () {
  that.NewState(that);

  //Compare old state to new state
  if(that.OldState().Name == that.NewState().Name()){
       // View model states are same.
  }
  else{
      // View model states are different.
  }

});

**注意:此計算的可觀察函數也在第一次初始化視圖模型時執行。 **

希望這可以幫助 ! 乾杯!!




Related