当 foreach 数据绑定完成时做一些事情

Question

在我的表单中，列表是 "filled" 被淘汰。这是 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完成后，运行一段代码。关于如何实施它有什么想法吗？

Answer 1

来自 Knockout Documentation：（参见 afterRender，注释 7）

If you need to run some further custom logic on the generated DOM elements, you can use any of the afterRender/afterAdd/beforeRemove/beforeMove/afterMove callbacks

<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 应该没问题

当 foreach 数据绑定完成时做一些事情

Do something when a foreach data-binding is completed

javascript

knockout.js