4

cssとknockout.js(バインディング)を使用して作成した以下のようなグラフチャートがあります

データの値に応じて、さまざまな css クラスを選択してバーの高さを調整する必要があります。

以下のノックアウト if ステートメントを使用しようとしました。

The <!-- ko --> and <!-- /ko -->

ただし、以下のようなものが必要なため、これは私の要件を満たしていません。

     <ul data-bind="foreach: ArrayData">
      <!-- ko if: value >= 300 and value <=250 -->
            <li class="height300Css">
        <!-- /ko -->
       <!-- ko if: value >= 200 and value <=300 -->
            <li class="height200Css">
        <!-- /ko -->
    </ul>

誰かが代替案を提案できますか？

ありがとう。

4

2 に答える 2

13

正しい css クラスを返す計算されたオブザーバブルをビュー モデルに追加し、「attr」バインディング ( http://knockoutjs.com/documentation/attr-binding.html ) を使用します。

または、「css」バインディングを使用しますが、ビュー ファイルに選択ロジック全体を含める必要があります。

コード例:

var ViewModel = function() {
    var self = this;

    // ....

    self.cssClass = ko.computed(function() {
        var value = self.value();
        if (value >= 300 && value <= 250) {
            return 'height300Css';
        }
        // ...
    };
};

そしてビューで：

<li data-bind="attr: { class: cssClass }">

オブジェクトの配列を扱っている場合は、計算されたオブザーバブルをそれらのオブジェクトに追加するか、通常の関数をビュー モデルに追加して foreach ループ中に呼び出すことができます。

var ViewModel = function() {
    var self = this;

    self.items = ko.observableArray(...);

    self.getCssClass = function(item) {
        var value = item.value();
        // ...
    };
};

そしてビューで：

<li data-bind="attr: { class: $root.getCssClass($data) }">

デモ: http://jsbin.com/awacew

于 2012-05-23T11:12:04.707 に答える
3

CSSバインディングをそのまま使用できますか？

<ul id="MyList" data-bind="foreach:list">
    <li>
        <span data-bind="text: value, css: { height300Css: value >= 250 && value <= 300, height200Css: value >= 200 && value < 250 }"></span>
    </li>
</ul>

ところで、それは単なる疑似コードだと確信していますが、値が >= 300 AND <= 250 になることはありません。また、「and」の代わりに && を使用する必要があるため、フィドルの式を変更して 200-249 が赤になり、 250-300 は青になります。

于 2012-05-23T20:16:45.630 に答える