Knockoutjs数据绑定创建了多个元素

Question

我正在努力学习knockoutjs。所以我正在阅读这个网址http://knockoutjs.com/documentation/foreach-binding.html

的写作

我只是尝试从上面的url运行代码，但是当我点击按钮时，创建了多个Li元素，它应该只创建一个。

这里是html代码

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

<button data-bind="click: addItem">Add</button>

JS代码

ko.applyBindings({
        myItems: ko.observableArray([ 'A', 'B', 'C' ]),
        yellowFadeIn: function(element, index, data) {

            $(element).filter("li")
                      .animate({ backgroundColor: 'yellow' }, 200)
                      .animate({ backgroundColor: 'white' }, 800);
        },
        addItem: function() {this.myItems.push('New item'); }
    });

上面的代码是在knockout js教程页面上发布的，但它没有按预期工作。我还检查了jquery animate函数被调用但没有改变bg颜色。代码有什么问题？

Answer 1

您发布的代码需要jQuery才能运行此部分：

$(element).filter("li").animate({ backgroundColor: 'yellow' }, 200).animate({ backgroundColor: 'white' }, 800);

如果您没有jquery，则yellowFadeIn函数将失败，并且显然knockout尝试在每次单击时重新应用先前的尝试。

看到你的小提琴编辑： http://emberjs.com/blog/2015/05/13/ember-1-12-released.html

另请注意，animate的jquery文档说明background-color属性无法设置动画，除非使用http://jsfiddle.net/jkrxv8e8/2/插件。

这里是添加了相关插件的小提琴

jquery.color