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 に答える