Question

我已经创建了一个自定义绑定，用于使用正则表达式模式验证observable，但我在计算的observable上遇到了一些问题。我创建了一个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());

Answer 1

问题在于作家

if (!isNaN(value)) {
    self.temp1(value);
}

可防止value中存储无效的temp2。

您可以将无效的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 });

更新了jsfiddle http://jsfiddle.net/88vnx9ka/9/

顺便说一句

修正了语法问题，它不是validate {pattern...，而是validate: {pattern...。
不知道为什么你需要在3秒后恢复到上一个有效值。这种行为使我困惑了几分钟。所以我禁用了该功能来演示这个解决方案。

<强>更新

在阅读器中修复了toFixed(2)的temp3格式。

KnockoutJS - 计算的可写observable不能正确更新绑定

1 个答案: