fadeIn() 在 Knockout 的 afterAdd 回调中

Question

我正在尝试学习 foreach 绑定，但我不明白为什么下面代码中的 $(element).fadeIn(500) 行不起作用：

ko.applyBindings({
        myItems: ko.observableArray([ 'A', 'B', 'C' ]),
        FadeIn: function(element, index, item) {
          if(element.nodeType == 1){
            $(element).fadeIn(500);
          }
        },
        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="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: { data: myItems, afterAdd: FadeIn }">
    <li data-bind="text: $data"></li>
</ul>
 
<button data-bind="click: addItem">Add</button>

问题是当我添加一个新项目时，它出现在没有 fadeIn 效果的页面中。

Codepen -> https://codepen.io/anon/pen/ejxeBr

Answer 1

这是因为您的元素没有被隐藏。改成

$(element).hide().fadeIn(500);
// --------^^^^^^^

...或在标记中对其设置 style="display: none"，但这可能会很痛苦，因为预先存在的元素（不会得到 afterAdd 调用）。

示例：

var count = 0;
ko.applyBindings({
  myItems: ko.observableArray(['A', 'B', 'C']),
  FadeIn: function(element, index, item) {
    if (element.nodeType == 1) {
      $(element).hide().fadeIn(500);
    }
  },
  addItem: function() {
    this.myItems.push('New item');
  }
});

<ul data-bind="foreach: { data: myItems, afterAdd: FadeIn }">
  <li data-bind="text: $data"></li>
</ul>

<button data-bind="click: addItem">Add</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

fadeIn() 在 Knockout 的 afterAdd 回调中

fadeIn() inside Knockout's afterAdd callback

jquery

knockout.js

knockout-3.4