Question

中的四个按钮之一时

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

knockout将向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 knockout创建一个css类。如果单击[Spades]按钮，向observableArray添加“spade”，我将addClass（“spades”）添加到LI;如果单击[Hearts]按钮，我将添加类（“心”）。

Answer 1

如果您只想将类应用于新添加的项目，那么您可以使用afterAdd callback on the foreach绑定：

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

在你的viewmodel中：

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

或者你可以创建一个自定义绑定处理程序，它委托给foreach并封装你的DOM操作逻辑，以保持你的viewmodel“干净”。

演示JSFiddle。

如果要将样式应用于所有元素（对于已存在的元素和新添加的元素），可以使用afterRender回调而不是afterAdd。

或者在这种情况下，您可以使用class绑定来删除jquery依赖项以及viewmodel中的所有DOM操作：

在这种情况下，您的绑定将如下所示：

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

在你的viewmodel中你只需要一个返回类名的函数：

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。

当foreach绑定到observableArray时，如何引用DOM元素knockout

1 个答案: