javascript - meaning - knockout框架




检测Knockout视图模型的更改 (6)

使用扩展器:

ko.extenders.trackChange = function (target, track) {
    if (track) {
        target.isDirty = ko.observable(false);
        target.originalValue = target();
        target.setOriginalValue = function(startingValue) {
            target.originalValue = startingValue; 
        };
        target.subscribe(function (newValue) {
            // use != not !== so numbers will equate naturally
            target.isDirty(newValue != target.originalValue);
        });
    }
    return target;
};

然后:

self.MyProperty= ko.observable("Property Value").extend({ trackChange: true });

现在你可以像这样检查:

self.MyProperty.isDirty()

您还可以编写一些通用的viewModel遍历,以查看是否有任何更改:

self.isDirty = ko.computed(function () {
    for (key in self) {
        if (self.hasOwnProperty(key) && ko.isObservable(self[key]) && typeof self[key].isDirty === 'function' && self[key].isDirty()) {
            return true;
        }
    }
});

...然后只需检查viewModel级别

self.isDirty()

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


您可以使用下面的插件:

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/


我通过在页面加载时拍摄视图模型的快照,然后将该快照与当前视图模型进行比较来完成此操作。 我不关心什么属性改变了,只要有任何改变。

拍快照:

var originalViewModel = JSON.stringify(ko.toJS(viewModel));

稍后比较:

if(originalViewModel != JSON.stringify(ko.toJS(viewModel))){
    // Something has changed, but we don't know what
}

考虑使用Knockout-Validation插件

它实现了以下内容:

yourProperty.isModified() - 检查用户是否修改了该值。

yourProperty.originalValue - 因此您可以检查值是否真的发生了变化。

与其他验证的东西一起派上用场!

干杯


考虑如下视图模型

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.
  }

});

**注意:此计算的可观察函数也在第一次初始化视图模型时执行。 **

希望这可以帮助 ! 干杯!!





knockout.js