在foreach数据绑定完成后执行某些操作

Do something when a foreach data-binding is completed

本文关键字：执行 操作 foreach 数据绑定      更新时间：2023-09-26

在我的表单中，列表是通过敲除来"填充"的。这是ul代码：

<ul class="sortable ui-widget-content" data-bind="foreach: menus">
   <li>
      <a href="#" data-bind="attr: { title: name }, click: $parent.navigate">
         <i data-bind="attr: { class: iconClass }"></i>
             <span data-bind="text: title"></span>
       </a>
   </li>
</ul>

而且效果很好。我现在需要的是，当foreach完成后，运行一段代码。关于如何实现这一点，有什么想法吗？

来自淘汰文档：（参见afterRender，注释7）

如果您需要在生成的DOM上运行一些进一步的自定义逻辑元素，可以使用afterRender/afterAdd/beforeRemove/beforeMove/afterMove回调

<ul data-bind="foreach: { data: myItems, afterAdd: yellowFadeIn }">
    <li data-bind="text: $data"></li>
</ul>
<button data-bind="click: addItem">Add</button>
<script type="text/javascript">
    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'); }
    });
</script>

你看起来像这样吗？

编辑：在这种情况下，afterRender应该是正常的

相关文章：