当然，这是一个非常容易回答的问题，但是有没有一种简单的方法可以确定剔除视图模型的任何属性是否发生了变化？
问问题
49357 次
9 回答
100
使用扩展器：
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()
于 2012-07-13T14:12:36.830 回答
50
您可以订阅要监控的属性：
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;
}
（还没有测试它 - 但你应该明白）
于 2012-05-16T16:31:49.043 回答
6
它实现了以下功能：
yourProperty.isModified() - 检查用户是否修改了值。
yourProperty.originalValue - 所以你可以检查值是否真的改变了。
连同其他派上用场的验证内容！
干杯
于 2015-07-10T11:41:44.387 回答
3
您可以为此使用以下插件：
https://github.com/ZiadJ/knockoutjs-reactor
例如，该代码将允许您跟踪任何视图模型中的所有更改：
ko.watch(someViewModel, { depth: -1 }, function(parents, child) {
alert('New value is: ' + child());
});
PS：到目前为止，这不适用于嵌套在数组中的可订阅，但支持它的新版本正在开发中。
更新：示例代码已升级为使用 v1.2b，它增加了对数组项和 subscribable-in-subscribable 属性的支持。
于 2013-05-13T17:32:03.017 回答
2
我有同样的问题，我需要观察 viewModel 上的任何变化，以便将数据发送回服务器，如果有人仍然感兴趣，我做了一些研究，这是我设法组装的最佳解决方案：
function GlobalObserver(viewModel, callback) {
var self = this;
viewModel.allChangesObserver = ko.computed(function() {
self.viewModelRaw = ko.mapping.toJS(viewModel);
});
viewModel.allChangesObserver.subscribe(function() {
callback(self.viewModelRaw);
});
self.dispose = function() {
if (viewModel.allChangesObserver)
viewModel.allChangesObserver.dispose();
delete viewModel.allChangesObserver;
};
};
为了使用这个“全球观察者”：
function updateEntireViewModel() {
var rawViewModel = Ajax_GetItemEntity(); //fetch the json object..
//enter validation code here, to ensure entity is correct.
if (koGlobalObserver)
koGlobalObserver.dispose(); //If already observing the older ViewModel, stop doing that!
var viewModel = ko.mapping.fromJS(rawViewModel);
koGlobalObserver = new GlobalObserver(viewModel, Ajax_Submit);
ko.applyBindings(viewModel [ ,optional dom element]);
}
请注意，给定的回调（在本例中为“Ajax_Submit”）将在视图模型上发生的任何更改时触发，因此我认为确实建议使用某种延迟机制仅在用户完成编辑时发送实体属性：
var _entitiesUpdateTimers = {};
function Ajax_Submit(entity) {
var key = entity.ID; //or whatever uniquely related to the current view model..
if (typeof _entitiesUpdateTimers[key] !== 'undefined')
clearTimeout(_entitiesUpdateTimers[key]);
_entitiesUpdateTimers[key] =
setTimeout(function() { SendEntityFunction(entity); }, 500);
}
我是 JavaScript 和淘汰框架的新手，（直到昨天我才开始使用这个美妙的框架），所以如果我做错了什么，请不要生我的气.. (-:
希望这可以帮助！
于 2013-01-22T16:47:45.767 回答
2
我已经修改了@Brett Green 代码并对其进行了扩展，以便我们可以拥有 AcceptChanges，将模型标记为不脏，并以更好的方式将模型标记为可跟踪。这是代码：
var viewModel = {
name: ko.observable()
};
ko.track(viewModel);
于 2014-03-19T22:04:23.007 回答
1
我通过在页面加载时拍摄视图模型的快照来做到这一点，然后将该快照与当前视图模型进行比较。我不在乎什么属性改变了，只要有改变。
拍摄快照：
var originalViewModel = JSON.stringify(ko.toJS(viewModel));
稍后比较：
if(originalViewModel != JSON.stringify(ko.toJS(viewModel))){
// Something has changed, but we don't know what
}
于 2014-08-26T17:11:54.310 回答
1
考虑如下视图模型
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));
您可以在视图模型中将变量声明为计算的可观察对象，例如
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.
}
});
**注意：这个计算出来的 observable 函数也会在视图模型初始化的时候执行。**
希望这可以帮助 ！干杯！！
于 2015-05-08T09:24:35.847 回答
0
我喜欢布雷特格林的解决方案。正如有人指出的那样， isDirty 比较不适用于 Date 对象。我通过像这样扩展订阅方法来解决它：
observable.subscribe(function (newValue) {
observable.isDirty(newValue != observable.originalValue);
if (newValue instanceof Date) {
observable.isDirty(newValue.getTime() != observable.originalValue.getTime());
}
});
于 2020-10-06T11:32:31.687 回答