0

我已经指定了一个 afterAdd 绑定，因此当我将一个项目添加到 observableArray 时，我会得到一个漂亮的 slideDown 效果。效果很好，看起来很酷。

问题出在初始负载上。我正在从数据源加载并将 observableArray 设置为返回的 json 数据。想象一下屏幕上的 20 个项目同时向下滑动。不是很酷。我怎样才能阻止这种情况发生？

滑动功能：

vm.addItem = function (elem) {
    if (elem.nodeType === 1) { $(elem).hide().slideDown(); }
};

添加单个项目时看起来不错：

vm.postComment = function () {
    $.post('Place/PostComment', { placeId: vm.placeId(), comment: vm.comment() }, function (comment) {
        vm.comments.push(comment);
        vm.comment('');
    });
};

设置初始值时不太好。每个添加的向下滑动：

vm.loadPlace = function () {
    $.getJSON('Place/GetComments', { placeId: vm.placeId() }, function (data) {
        vm.comments(data.Comments);
    });
};

更新 2012 年 11 月 16 日上午

根据 Vyacheslav Voronchuk 的建议，我的 HTML 如下所示：

<ul id="placeComments" data-bind="foreach: { data: comments, afterAdd: addItem, afterRender: renderedComments, beforeRemove: removeItem }">

Javascript 看起来像这样： 

vm.renderedComments = function () {
    loading = false;
};

vm.addItem = function (elem) {
    if (!loading) {
        if (elem.nodeType === 1) {
            $(elem).hide().slideDown();
        }
    }
};

vm.loadPlace = function () {
    $.getJSON('Place/GetPlace', { placeId: vm.placeId() }, function (data) {
        loading = true;
        vm.comments(data.Comments);
    });
};

还在看动图。使用调试器我可以看到它两次进入 addItem 函数。

在旁注中，我猜这就是文档使用fadeIn而不是slideDown的原因。也许我应该换...

4

1 回答 1

0 
vm.loadPlace = function () {
    $.getJSON('Place/GetComments', { placeId: vm.placeId() }, function (data) {
         vm.loading = true;
         vm.comments(data.Comments);
    });
};

vm.addItem = function (elem) {
   if (elem.nodeType === 1) { 
      if(!vm.loading) {
         $(elem).hide().slideDown(); 
      }
   }
};

在您的视图中，添加afterRender您将设置的位置vm.loading = false。

于 2012-11-16T09:14:36.393 回答