2

我有一个要求，如果我们的剔除网格中的所有数字列都为负数，则它们应该具有红色以警告用户。

我可以使用标准绑定来做到这一点，但它会向视图模型和视图添加大量代码。

我使用淘汰赛验证框架，他们使用扩展器来添加验证。

我也想做同样的事情，我查看了扩展程序示例，但它们要求您确实向视图中添加元素，验证框架以某种方式仅适用于扩展程序，我该怎么做？我的目标是只需要这样的东西来添加警告

this.accountBalance = ko.observable(data.AccountBalance).extend({ warnIfNegative: true });

更新：我在查看了验证框架之后做了这个，我不喜欢的是你需要覆盖每个绑定才能让它工作，例如我想要这个用于文本和值绑定

(function () {

    ko.extenders.negativeValueWarning = function (target, option) {
        target.hasWarning = ko.observable();

        function warn(newValue) {
            target.hasWarning(newValue < 0 ? true : false);
        }

        warn(target());

        target.subscribe(warn);

        return target;
    };


    var init = ko.bindingHandlers.text.init;
    ko.bindingHandlers.text.init = function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        if (init)
            init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);

        var value = valueAccessor();
        if (value.hasWarning) {
            ko.applyBindingsToNode(element, { negativeValueWarning: value.hasWarning });
        }
    };

    ko.bindingHandlers.negativeValueWarning = {
        update: function (element, valueAccessor) {
            var warn = ko.utils.unwrapObservable(valueAccessor());
            if (warn)
                $(element).addClass("negative-warning");
            else
                $(element).removeClass("negative-warning");
        }
    };
} ());
4

2 回答 2

1

我终于做到了，你们觉得呢？

http://jsfiddle.net/ZYyEw/25/

更新：使用计算而不是订阅

ko.extenders.negativeValueWarning = function (target, option) {
    target.hasWarning = ko.observable();

    function warn(newValue) {
        if(newValue && newValue.substring) {
            newValue = parseFloat(newValue);
        }
        target.hasWarning(newValue < 0 ? true : false);
    }

    warn(target());

    target.subscribe(warn);

    return target;
};
于 2012-05-28T21:52:39.333 回答
0

我认为最好通过自定义活页夹。有关它们的信息，请参阅http://knockoutjs.com/documentation/custom-bindings.html

我在http://jsfiddle.net/photo_tom/DzQMX/上创建了一个小提琴，它可以满足您的需求。这个例子中的“技巧”是我重用了敲除值绑定来处理所有的实际工作。然后我添加了代码来控制控件的显示方式。它基本上是将扩展器与数据绑定器合并。

希望这可以帮助。

于 2012-05-28T13:29:47.617 回答