我可以在无容器淘汰元素中使用动画转换绑定吗?

Can I use animated transition bindings in a containerless knockout element?

本文关键字:动画 转换 绑定 元素 淘汰 我可以      更新时间:2023-09-26

如果我有一组用无容器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>