这是我创建的简单 fiddle 。它使用knockout并创建了一个简单的输入框和按钮
<form>
<p>Login name:
<input data-bind="textInput: userName" />
</p>
<button data-bind="click: Onclick">Save</button>
</form>
ko.applyBindings({
userName: ko.observable("abcd"),
Onclick: function () {
// add an alert if value has changed or do nothing.
// tried adding the alert but it didnt fire with the value in the input box
}
});
我正在尝试 knockout 中的场景,如果输入框的值没有更改,则单击保存没有任何影响。
但是,如果输入框的值已更改,则单击“保存”时将执行一个操作,例如触发警报框。
我的问题主要是:
- 如何回溯之前输入框的值 它会更新。
- 我这样做主要是为了提高效率 在我们的系统中,如果存在,则不要往返数据库 没有变化
有什么建议或帮助吗?
最佳答案
Knockout 已经进行了更改跟踪,您只需点击它即可。订阅userName
并设置dirty
标志。成功更新服务器后重置标志,如下所示:
function ViewModel () {
var self = this;
// data
self.userName = ko.observable("abcd");
self.dirty = ko.observable(false);
// subscriptions
self.userName.subscribe(function () {
self.dirty(true);
});
// API
self.saveChanges = function () {
if (!self.dirty()) return;
$.post("url", {
userName: self.userName()
}).done(function () {
self.dirty(false);
});
});
}
ko.applyBindings(new ViewModel());
现在您甚至可以将“保存”按钮的“启用”状态绑定(bind)到该标志。
<form>
<p>Login name: <input data-bind="textInput: userName" /></p>
<button data-bind="click: saveChanges, enabled: dirty">Save</button>
</form>
重要说明由于dirty
标志的全局性质,您应该在保存过程中锁定 View 。否则,理论上用户可以进行其他更改,但当前一个状态的 saveChanges
进程返回时,脏标志会被重置,并且用户实际上失去了保存新状态的能力变化。
您可以借助更新
标志来做到这一点:
self.dirty = ko.observable(false);
self.updating = ko.observable(false);
self.saveChanges = function () {
if (!self.dirty()) return;
self.updating(true);
$.post("url", {
userName: self.userName()
}).done(function () {
self.dirty(false);
}).always(function () {
self.updating(false);
});
});
您可能想使用该标志来显示“正在保存...”叠加层,或者只是将其用作页面上每个输入元素上的 data-bind="disabled:updated"
。
如果您的模型中有许多属性会导致脏
状态,并且您不希望大量订阅污染您的 View 模型,则可以使用扩展器来完成该作业:
ko.extenders.dirtyTrack = function (target, dirtyObservable) {
target.subscribe(function () {
dirtyObservable(true);
});
return target;
};
在你看来
// data
self.dirty = ko.observable(false);
self.userName = ko.observable("abcd").extend({dirtyTrack: self.dirty});
self.oherField = ko.observable("foo").extend({dirtyTrack: self.dirty});
关于javascript - 如何使用knockout检查输入框值是否已更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28849128/