如果我有一组用无容器foreach构造的DOM元素,是否有可能与它们一起使用knockout动画过渡?例如:afteradd, aftermove, afterremove。
类似:
<!-- ko foreach: somelist(), afterAdd: afterAddCallback -->
<div>dom element for list item</div>
<!-- /ko -->
更新:我愚蠢地搞砸了我的测试代码。下面的代码将使用div(注释掉)或虚拟标记在控制台上生成消息。所以,是的。
ko.applyBindings({
myItems: ko.observableArray(['A', 'B', 'C']),
yellowFadeIn: function(element, index, data) {
console.debug("Something");
},
addItem: function() {
this.myItems.push('New item');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<!--div data-bind="foreach: {data:myItems, afterAdd: yellowFadeIn}" -->
<!-- ko foreach: { data: myItems, afterAdd: yellowFadeIn } -->
<div data-bind="text: $data"></div>
<!-- /ko -->
<!-- /div -->
<button data-bind="click: addItem">Add</button>