1

当您单击此小提琴中的四个按钮之一时 http://jsfiddle.net/Fe8mT/

     [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);
            };

我想在将项目推送到 observableArray 时创建的 LI 淘汰赛中添加一个 css 类。如果单击 [Spades] 按钮，向 observableArray 添加一个“spade”，我将 addClass("spades") 到 LI；如果单击 [Hearts] 按钮，我将添加Class("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并封装您的 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 回答