5

Knockout ViewModel のアイテムに $data を使用して連結された css クラス名を適用する方法を知りたいです。

ゴール

ユーザーが "Praise" ボタン (私の ViewModel 配列の項目) をクリックすると、CSS クラス "feedbackItemIconPraise" を LI に適用したいと思います。ユーザーが「Criticism」をクリックした場合、クラス「feedbackItemIconPraise」を適用したいと思います。

$data を使用して data-bind 属性で css クラスを連結するのが正しい方法だと思いましたが、間違っている可能性があります。

コード

私のViewModelの関連部分:

var FeedbackViewModel = function () {
    var self = this;
    self.feedbackItemTypes = ['Praise', 'Criticism', 'Problem', 'Question'];
    self.selectedFeedbackType = ko.observable('Praise');
    self.updateSelected = function (param) {
        self.selectedFeedbackType(param);
    };
};

var feedbackViewModel = new FeedbackViewModel();

ko.applyBindings(feedbackViewModel, document.getElementById("feedbackModal"));

ビュー表示の関連部分:

<div id="feedbackListContainer">
    <ul class="thumbnails" id="feedbackList" data-bind="foreach: feedbackItemTypes">
       <li class ="feedbackItem" data-bind="click: $parent.updateSelected, text:$data, attr:{id:'feedbackItem'+$data, title:$data}, css: {'feedbackItem-Highlighted':$data==$parent.selectedFeedbackType(), 'feedbackItemIcon'+$data: true}">
        </li>
        </ul>
</div>

問題

私が間違っていると思うのは、CSS クラス "'feedbackItemIcon' + $data" を適用することです。css クラスがどのように適用されるか、またこれが Knockout で可能かどうか、または Knockout の動作と矛盾するかどうかを誤解していると思います。このようにしようとすると、すべてのテキストが消えてしまうので、構文を完全に台無しにしていると思います。

いくつかの洞察をいただければ幸いです。

4

3 に答える 3

3

あなたは正しい解決策に非常に近づいています。

'feedbackItemIcon'+$data: true

あなたが正しい。Knockout はこの式の左側を更新しないため、これは機能しません。

代わりに、すべての列挙値をリストして、次のように記述します。

css: {'feedbackItem-Highlighted':$data==$parent.selectedFeedbackType(), 'feedbackItemIconPraise': $data==$parent.selectedFeedbackType() && $data='Praise', 'feedbackItemIconCriticism': $data==$parent.selectedFeedbackType() && $data='Criticism', 'feedbackItemIconProblem': $data==$parent.selectedFeedbackType() && $data='Problem', 'feedbackItemIconQuestion': $data==$parent.selectedFeedbackType() && $data='Question' }

少し見栄えが悪く、少し繰り返しのように見えることは知っていますが、私の知る限り、実行時に値が変化する CSS クラス名にテンプレート項目をバインドする方法はありません。

参考までに: おそらく既にご存じのことと思いますが、今後の訪問者のために、ここに CSS バインディングに関する Knockout ドキュメントへのリンクを示します。

于 2012-09-13T18:20:40.460 に答える
2

ここclassでカスタム バインディングを使用すると、別の方法でこれを行うことができます。

<li class ="feedbackItem" data-bind="
    click: $parent.updateSelected,
    text: $data,
    attr: {id:'feedbackItem'+$data, title:$data},
    css: {'feedbackItem-Highlighted':$data==$parent.selectedFeedbackType()},
    class: 'feedbackItemIcon'+$data">
</li>

この機能はcss、Knockout の今後の 2.2 バージョンでもバインディングの一部になります。classそのため、カスタム バインディングを含める必要はありません。cssただし、2 つのバインディングを含めることはできません。1 つの回避策は、 :classのエイリアスを作成することです。別の方法として、key.subkeyプラグインを使用すると、このバインドが可能になります。cssko.bindingHandlers['class'] = ko.bindingHandlers.css

<li class ="feedbackItem" data-bind="
    click: $parent.updateSelected,
    text: $data,
    attr: {id:'feedbackItem'+$data, title:$data},
    css.feedbackItem-Highlighted: $data==$parent.selectedFeedbackType(),
    css: 'feedbackItemIcon'+$data">
</li>
于 2012-09-13T20:08:00.737 に答える