代码之家 › 专栏 › 技术社区 › Animesh Kumar

Knockout的afterAdd回调中的fadeIn()

knockout-3.4 knockout.js jquery

Animesh Kumar · 技术社区 · 6 年前

我在努力学习 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>

法丹

代码笔-> https://codepen.io/anon/pen/ejxeBr

1 回复 | 直到 6 年前

T.J. Crowder 6 年前

因为你的元素没有被隐藏。把它改成

$(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>

推荐文章

lily · 淘汰-如何将动态填充的复选框转换为单选按钮(是/否)?

7 年前

Dams · TypeScript和knockout自定义活页夹

7 年前

Sarah · 什么是原型和订阅淘汰?

7 年前

Ian · 敲除ValidationMessage绑定未显示消息

7 年前

Tamer · 使用dxTreeList在页面加载时显示所选节点

7 年前

Enrico Casanova · 使用颜色选择器更改可观察数组中对象的属性

7 年前

JGuymer · 淘汰JS安全建议/开发工具

7 年前

Amit Bhagat Kunal Valecha · 组件参数中可观察的通过值

7 年前

kaka1234 · 淘汰JS:从viewmodel observable数组创建Json

7 年前

Tr Ex · 最小化窗口时,标签的文本与文本区域重叠

7 年前