javascript - 检测Knockout视图模型的更改



4 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;
}

(没有测试过 - 但你应该明白这个想法)

javascript knockout.js

当然这是一个非常容易回答的问题,但有一种简单的方法可以确定淘汰视图模型的任何属性是否已经改变?




您可以使用下面的插件:

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