Question

我已经要求我们的淘汰网格中的所有数字列都应该是红色的，如果它们是负数以警告用户。

我可以使用标准绑定来实现，但它会为viewmodel和view添加大量代码。

我使用敲除验证框架，他们使用扩展程序添加验证。

我想做同样的事情，我看过扩展程序示例，但是它们要求你在视图中添加元素，不知怎样，验证框架只与扩展程序一起使用，我该怎么做呢？我的目标是只需要这样的东西来添加警告

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");
        }
    };
} ());

Answer 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;
};

Answer 2

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

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

希望这有帮助。

如果值为负，则使用knockout扩展器添加警告

2 个答案: