7

私はこのCSSバインディングを行っています:

css: { greenBorder: hasGreenBorder, whiteBorder: hasWhiteBorder, blackBorder: hasBlackBorder }

これは機能しますが、viewmodel が .whiteBorder や .blackBorder などの css クラス名だけでなく返す必要があるのはなぜですか。

私の論理では、3 つすべての has-Variables から true が 1 つだけ存在し、その他は常に false であるということです。

クラス名を適用し、ビューモデルで選択するクラス名をこのロジックに入れるだけのより良い方法があるに違いないと思いますよね？

4

4 に答える 4

7

attrバインディングを使用できます。

data-bind="attr: { class: yourClass }"
于 2013-07-19T07:03:43.000 に答える
1

適切な方法

クラスバインディングはあなたが探しているものです。

このバインディングにより、要素に任意の css クラスを設定できます。jQuery が必要です。

使用法 ：

<div data-bind="class: single">Single Observable Class</div>
<div data-bind="class: multiple">Multiple Observable Classes</div>



var vm = {
    single: ko.observable("red"),
    multiple: ko.observableArray(["blue","small"])
};
vm.change = function () {
    vm.single(vm.single() === "red" ? "black" : "red");

    if (vm.multiple.indexOf("small") > -1) {
        vm.multiple.remove("small");
        vm.multiple.push("big");
    } else {
        vm.multiple.remove("big");
        vm.multiple.push("small");
    }    
};

役立つことを願っています

于 2013-07-19T07:15:43.490 に答える
1

はい、オブザーバブル変数または計算変数をクラス名として使用できます。Knockout ドキュメントから取得したこのサンプル コードを見てください。

<div data-bind="css: profitStatus">
   Profit Information
</div>

<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000)
    };

    // Evalutes to a positive value, so initially we apply the "profitPositive" class
    viewModel.profitStatus = ko.computed(function() {
        return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";
    }, viewModel);

    // Causes the "profitPositive" class to be removed and "profitWarning" class to be added
    viewModel.currentProfit(-50);
</script>
于 2013-07-19T07:04:55.063 に答える
0

バインディングを使用してクラスを設定することができattrます(@david.s の提案に従って) が、このタイプのロジックがある場合は、 custom に配置する傾向がありますbindingHandler。

(この場合は) 境界線の色を決定するが、クラスに直接関連付けられていない状態情報を viewModel に公開させます。

this.state = ko.observable("complete"); //complete, pending, or cancelled (for example)

次に、バインディング ハンドラーを使用して、これをクラスにマップします。

ko.bindingHandlers.stateStyle = {
    update: function(element, valueAccessor) {
        var state = ko.utils.unwrapObservable(valueAccessor());

        if (state === "completed") {
            $(element).addClass("hasGreenBorder"); //again, just an example
        }
        else if (state === "pending") {
            //etc
        }
    }
}

次に、要素に新しいバインディングを使用します

<div data-bind="stateStyle: state"></div>

このアプローチは、ビュー モデルが css クラスを直接参照しておらず (私には間違っているように感じます) state1 => green border、ビューのインライン バインディングでロジックが定義されていないことを意味します。

于 2013-07-19T07:10:25.190 に答える