KnockoutJS-一个计算可写的可观察对象;无法正确更新绑定

KnockoutJS - A computed writable observable doesn't update bindings correctly

本文关键字:对象 绑定 更新 观察 一个 计算 KnockoutJS-      更新时间:2023-09-26

我已经创建了一个自定义绑定,用于使用正则表达式模式验证可观察性,但在计算可观察性方面存在一些问题。我创建了一个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格式。