如何引用的DOM元素淘汰賽創建時的foreach綁定到observableArray

當你在這個小提琴點擊四個按鈕中的一個http://jsfiddle.net/Fe8mT/如何引用的DOM元素淘汰賽創建時的foreach綁定到observableArray

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

淘汰賽將新LI項添加到對應的UL 「套裝」的按鈕。我想知道如何引用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); 
      };

我想添加一個css類到LI淘汰賽創建時，項目被推到observableArray上。如果單擊[Spades]按鈕，向observableArray添加一個「spade」，我會向LI添加Class（「spades」）;如果單擊[Hearts]按鈕，我將添加Class（「hearts」）。

來源

2013-09-28 Tim

您是否還希望將這些類添加到已經退出的元素到列表中或僅添加到新添加的元素中？ – nemesv

在實際的應用程序中，當observableArray最初由來自數據庫的數據填充時，必須將該類添加到添加到數組中的每個新項目中。然後用戶可以刪除一些項目，或者添加新的項目，並且該數組將被保存回數據庫。 – Tim

如果你想的類只適用於新添加的項目，那麼你可以使用afterAdd callback on the 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並封裝您的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-28 10:54:40 nemesv

謝謝你這個答案的卓越性，引導我朝着正確的方向前進。 – Tim

如何引用的DOM元素淘汰賽創建時的foreach綁定到observableArray

回答

相關問題