1

このフィドルの4つのボタンのいずれかをクリックすると http://jsfiddle.net/Fe8mT/

     [Spades] [Hearts] [Diamonds] [Clubs]

ノックアウトは、ボタンの「スーツ」に対応する UL に新しい LI アイテムを追加します。self.addCardハンドラーで新しく作成された LI 要素を参照する方法を知りたいです。

            self.addCard = function (data,event) {                    
                var card = event.currentTarget.id; // the button's id (S, H, D, C)        
                self.hand.push(card);
            };

項目が observableArray にプッシュされたときに作成される LI ノックアウトに css クラスを追加したいと考えています。[Spades] ボタンがクリックされた場合は、"spade" を observableArray に追加し、LI に addClass("spades") を追加します。[Hearts] ボタンがクリックされた場合は、addClass("hearts") を追加します。

4

1 に答える 1

3

新しく追加されたアイテムにのみクラスを適用する場合は、バインディングでafterAddコールバックをforeach使用できます。

<ul data-bind="foreach: { data: hand, afterAdd: afterAdd}" id="hand">
    <li data-bind="text: $data"></li>
</ul>

そしてあなたのビューモデルで：

self.afterAdd = function (element) {
    var li = $(element).filter("li");
    li.addClass(self.getClass(li.text())); // getClass turns "S" to "spades"
}

foreachまたは、ViewModel を「クリーン」に保つために、DOM 操作ロジックに委譲してカプセル化するカスタム バインディング ハンドラを作成できます。

JSFiddleのデモ。

スタイルをすべての要素 (つまり、既存の要素と新しく追加された要素) に適用する場合は、.afterRenderの代わりにコールバックを使用できますafterAdd。

または、この場合class、ビューモデルから jquery 依存関係とすべての DOM 操作を削除するバインディングを使用できます。

この場合、バインディングは次のようになります。

<ul data-bind="foreach: hand" id="hand">
    <li data-bind="text: $data, css: $parent.getType($data)"></li>
</ul>

ビューモデルでは、クラス名を返す関数が必要です。

self.getType = function (card) {
    if (card == "S") return "spades";
    if (card == "H") return "hearts";
    if (card == "D") return "diamonds";
    if (card == "C") return "clubs";
}

JSFiddleのデモ。

于 2013-09-28T10:54:40.063 に答える