4

<li> 要素にかなり長いノックアウト CSS バインディングが適用されています。

ビュー モデルの適切なシナリオでは、クラス リストは次のようになります。

<li class="workItem task notRead">
</li>

ここで、「workItem」は単なる静的文字列であり、「タスク」はビュー モデルで計算された「workItemTypeName」から返され、「notRead」はビュー モデルのプロパティに基づいて切り替えられます。

私の頭の中に存在する完璧な世界では、次の 3 つのクラス割り当てステートメントを組み合わせることができたはずです (これらは個別に機能します)。

<li class="workItem">
</li>

<li data-bind="css: workItemTypeName">
</li>

<li data-bind="css: { 'notRead': isNotRead }">
</li>

このようなものに：

<li data-bind="css: { 'workItem', workItemTypeName, 'notRead': isNotRead }">
</li>

少し苦労した後、なんとかこれにたどり着きました（これは機能します）：

<li data-bind="attr: { 'class': workItemTypeName + ' ' + ' workItem' }, css: {
'notRead': isNotRead }">
</li>

しかし、私はそれが好きではありません...静的、計算、およびトグルステートメントを同じcssバインディングに組み合わせることが可能かどうか、誰かが知っていますか? または、それが尋ねられたものであり、将来ノックアウトに追加される可能性がある場合は?

4

2 に答える 2

4

個々の値に依存するのではなく、値をバインディングに返す計算メソッドを ViewModel で作成できます。これはよりノックアウト風です (私の意見では)。

self.workItemCss = ko.computed(function () {
    return "workItem" + (self.isNotRead() ? " notRead" : "")
        + " " + self.workItemTypeName();
});

<!-- html -->
<li data-bind="css: workItemCss">
于 2013-11-08T15:29:26.930 に答える
4

@ExplosionPills のソリューションは正しい方向に進んでいますが、まだ十分に慣用的ではありません。

Knockout は、CSS クラス名と true/falsy 値またはオブザーバブル (!) のオブジェクトをバインディングに期待しますcss。だから、それを1つだけ与えてください。

self.workItemCss = ko.computed(function () {
    var classes = {};
    classes.workItem = true;
    classes.notRead = self.isNotRead;
    classes[ko.unwrap(self.workItemTypeName)] = true;
    return classes;
});

http://jsfiddle.net/SHmc8/ (インタラクティブ: http://jsfiddle.net/SHmc8/1/ )

class属性とcssバインディングを一緒に使用することもできることに注意してください。

<li class="any fixed classes" data-bind="css: workItemCss">

したがって、classes.workItem = true;実際には意味がありません。

于 2013-11-08T15:45:55.087 に答える