KnockoutJS-一个计算可写的可观察对象;无法正确更新绑定
KnockoutJS - A computed writable observable doesn't update bindings correctly
我已经创建了一个自定义绑定,用于使用正则表达式模式验证可观察性,但在计算可观察性方面存在一些问题。我创建了一个jsfiddle:http://jsfiddle.net/melck/88vnx9ka/7/
当他有一个错误的条目,比如temp4时,我想在我的计算可观察对象上留言。如何在不触发temp2消息的情况下完成此操作?
你能帮我解决这些问题吗?
ko.bindingHandlers.validate = {
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var value = ko.utils.unwrapObservable(valueAccessor()) || {};
var field = value.field || '';
var message = value.message || '';
var pattern = value.pattern || null;
var placement = value.placement || 'bottom';
// If field not valid
if (!pattern.test(field())) {
// We show error
$(element).addClass('error-tooltip');
$(element).tooltip({
title: message,
placement: placement,
trigger: 'manual'
});
$(element).tooltip('show');
// If we have a last valid value
if (typeof element.lastValidValue != 'undefined') {
// We replace
field(element.lastValidValue);
// Timeout to hide tootip
setTimeout(function () {
$(element).tooltip('destroy')
}, 3000);
}
} else {
// Otherwise we keep last valid value
element.lastValidValue = field();
$(element).removeClass('error-tooltip');
$(element).tooltip('destroy');
}
}
};
var ViewModel = function () {
var self = this;
self.temp1 = ko.observable(25);
self.temp2 = ko.computed({
read: function () {
return self.temp1();
},
write: function (value) {
if (!isNaN(value)) {
self.temp1(value);
}
},
owner: this
}).extend({ rateLimit: 500 });
self.temp3 = ko.computed({
read: function () {
return self.temp1() * 3;
},
write: function (value) {
if (!isNaN(value)) {
value = value / 3;
self.temp1(value.toFixed(2));
}
},
owner: this
}).extend({ rateLimit: 500 });
self.init = function(){
ko.applyBindings(self, document.getElementById('model'));
delete self.init;
};
self.temp4 = ko.observable('sds');
};
var model = new ViewModel();
$().ready(model.init());
问题出在写入程序
if (!isNaN(value)) {
self.temp1(value);
}
防止在CCD_ 2中存储无效的CCD_。
您可以将无效的value
存储在内部缓存中,如下所示:
self.temp2 = (function() {
var invalidVal = ko.observable();
return ko.computed({
read: function () {
if (invalidVal()) return invalidVal();
else return self.temp1();
},
write: function (value) {
if (!isNaN(value)) {
self.temp1(value);
invalidVal(undefined);
} else {
invalidVal(value);
}
},
owner: this
});
}()).extend({ rateLimit: 500 });
更新的jsfiddlehttp://jsfiddle.net/88vnx9ka/9/
BTW
- 修复了语法问题,它不是
validate {pattern...
,而是validate: {pattern...
- 不知道为什么您需要在3秒后恢复到最后一个有效值。这种行为使我困惑了好几分钟。所以我禁用了这个功能来演示这个解决方案
更新
修复了读取器中带有toFixed(2)
的temp3格式。
相关文章:
- 值未与数组对象绑定
- Angular:将函数从子对象绑定到父对象
- 将 .on 事件与对象绑定
- 挖空选项对象绑定
- 对象绑定模式的rest属性应该是最后一个
- Knockout.js用单个json对象绑定一个可观察对象
- angular.js将jquery自动完成对象绑定到ng模型,将值输入到对象的属性
- Knockout:为许多数据对象绑定模板引导模式
- JavaScript 对象绑定
- 使用javascript将JSON对象绑定到asp.net gridview控件
- 如何将复杂对象绑定到剑道调度程序中的字段
- D3:如何有条件地将 SVG 对象绑定到数据
- Ko_selectize数组对象绑定未定义
- 在选择框中从任意 JavaScript 对象绑定选项值和选项文本
- 使用 jQuery 将对象绑定到一行
- 如何将当前对象绑定到文本输入
- AngularJS将javascript对象绑定到指令属性
- 子属性更改时重新评估对象绑定
- 将Angular Service对象绑定到控制器作用域并更新
- 将模型对象绑定到JavaScript数组时出现语法错误