Question

在我的表格中，列表被淘汰“填充”。这是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）

如果需要在生成的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应该没问题

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

1 个答案: