如何检查输入框值在使用淘汰之前是否发生了更改
How to check if the input box value has changed before it using knockout
这是我创建的简单小提琴。它使用敲除并创建了一个简单的输入框和按钮
JSFiddle
<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已经进行了更改跟踪,您只需要点击它。订阅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());
现在,您甚至可以将Save按钮的"enabled"状态绑定到该标志。
<form>
<p>Login name: <input data-bind="textInput: userName" /></p>
<button data-bind="click: saveChanges, enabled: dirty">Save</button>
</form>
重要提示由于dirty
标志的全局性,您应该在保存过程中锁定视图。否则,理论上用户可以进行额外的更改,但当以前状态的saveChanges
进程返回时,脏标志会被重置,并且用户实际上失去了保存新更改的能力。
您可以在updating
标志的帮助下做到这一点:
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: updating"
。
如果你的模型中有很多属性会导致dirty
状态,并且你不想用很多订阅污染你的视图模型,你可以使用一个扩展程序来完成任务:
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});
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 如何检测是否有溢出
- jQuery中是否内置了任何字符串格式化函数
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 测试索引值是否等于某个数字的倍数
- Fancybox是否将Click事件静音
- 主干-不管怎样,检查事件以前是否绑定过
- YUI3 IO实用程序是否可以根据给定的内容类型标头值自动序列化数据
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 节点是否需要模块传递带有方括号的arg?这是个错误吗
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 是否可以将一个函数输入连接到另一个函数调用的文本
- 是否可以禁用jquery中的单个单选按钮
- 是否可以从父类访问子类的属性
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- 淘汰搜索/筛选
- 如何让程序检查所选单词中是否有按键
- 如何检查输入框值在使用淘汰之前是否发生了更改
- “数据绑定”是否是一个严格的仅淘汰属性