Backbone.js 提线木偶收集视图：如何检查是否因为“已添加项目”；重置"；或；加上“；？

我正在使用木偶的

CollectionView

来呈现带有

ItemViews

的项目列表。每当添加新项目时，我都希望在动画中运行一个短暂的淡入淡出。但不是在最初呈现集合（或重置集合）时

在使用木偶之前，我处理

reset

和

add

事件的方式略有不同，但我不知道如何在这里执行此操作。我查看了源代码，似乎

addItemView

负责添加子视图，并且

addChildView

（在集合上触发

add

时调用）和

render

（对于

reset

事件）都调用此方法

---

也许我遗漏了一些明显的东西。

我认为最好的选择是在呈现CollectionView后绑定事件

myCollectionView.on( "render", function() {
   this.on( "after:item:added", executeMyAnimation );
});

---

我认为最好的选择是在呈现CollectionView之后绑定事件

myCollectionView.on( "render", function() {
   this.on( "after:item:added", executeMyAnimation );
});

---

这是一种方法：

在您的

CompositeView

声明中包括这些函数：

onBeforeRender: function(){
  this.onBeforeItemAdded = function(){};
},

onRender: function(){
  this.onBeforeItemAdded = myAnimation;
}

这类似于我在《木偶》一书中提出的解决方案（）

工作原理：木偶网在渲染整个集合之前会触发“before:render”，因此可以将

onBeforeItemAdded

函数设置为不执行任何操作。渲染集合后，设置该函数以设置新项目视图的动画

由于每次集合视图添加项目视图时，它也会触发“before:item:added”，因此您可以定义一个

onBeforeItemAdded

函数，该函数将在触发该事件时自动调用。这种匹配是由于triggerMethod实现的

---

此解决方案可以解决您的问题，而无需在模型上添加标志。

这是一种方法：

在您的

CompositeView

声明中包括这些函数：

onBeforeRender: function(){
  this.onBeforeItemAdded = function(){};
},

onRender: function(){
  this.onBeforeItemAdded = myAnimation;
}

这类似于我在《木偶》一书中提出的解决方案（）

工作原理：木偶网在渲染整个集合之前会触发“before:render”，因此可以将

onBeforeItemAdded

函数设置为不执行任何操作。渲染集合后，设置该函数以设置新项目视图的动画

由于每次集合视图添加项目视图时，它也会触发“before:item:added”，因此您可以定义一个

onBeforeItemAdded

函数，该函数将在触发该事件时自动调用。这种匹配是由于triggerMethod实现的

---

此解决方案应该可以解决您的问题，而无需在模型上添加标志。

David Sulc的答案非常粗糙，fadeIn应该在项目本身中定义，而不是在父视图中定义。 另一件事是文档中没有提到onBeforeItemAdded（），因此它可能是供内部使用的，并且可能会随着时间的推移而改变

我建议在“父视图”中添加以下内容，注意：parentRendered标志：

    itemViewOptions: function() {
        return {
            collection: this.collection,
            parentRendered: this.rendered
        };
    },
    onRender: function() {
        this.rendered = true;
    }

并在项目视图内的onShow函数中使用该标志：

    onShow: function() {
        // show visual effect on newly added items
        if (this.options.parentRendered) {
            this.$el.css('opacity', 0).slideDown(200).animate(
                { opacity: 1 },
                { queue: false, duration: 400 }
            );
        }
        else {
            this.$el.show();
        }   
    }

---

David Sulc的答案很粗糙，fadeIn应该在item-it-self中定义，而不是在父视图中定义。 另一件事是文档中没有提到onBeforeItemAdded（），因此它可能是供内部使用的，并且可能会随着时间的推移而改变

我建议在“父视图”中添加以下内容，注意：parentRendered标志：

    itemViewOptions: function() {
        return {
            collection: this.collection,
            parentRendered: this.rendered
        };
    },
    onRender: function() {
        this.rendered = true;
    }

并在项目视图内的onShow函数中使用该标志：

    onShow: function() {
        // show visual effect on newly added items
        if (this.options.parentRendered) {
            this.$el.css('opacity', 0).slideDown(200).animate(
                { opacity: 1 },
                { queue: false, duration: 400 }
            );
        }
        else {
            this.$el.show();
        }   
    }

---

这适用于

CollectionView

，但不适用于我出于其他原因使用的

CompositeView

<代码>复合视图在集合重置时不会完全重新呈现自身，而仅重新呈现集合的项目视图。在我的应用程序中设置的方式是，首先使用空集合呈现视图，然后获取（并重置）

CompositeView

有一个事件

composite:collection:rendered

，但没有“before”，因此我无法禁用动画回调。最后我在模型上加了一个“animate”标志。这在

CollectionView

中很好用，但在

CompositeView

中就不行了，因为其他原因，我最终使用了

CompositeView

<代码>复合视图在集合重置时不会完全重新呈现自身，而仅重新呈现集合的项目视图。在我的应用程序中设置的方式是，首先使用空集合呈现视图，然后获取（并重置）

CompositeView

有一个事件

composite:collection:rendered

，但没有“before”，因此我无法禁用动画回调。最后，我在模型上挂了一个“动画”标志。这太棒了！值得一提的是，项目视图是

onBeforeItemAdded

中的第一个参数，因此您可以调用

view.on（'show'，myAnimation）

以获得更平滑的结果。这太棒了！值得补充的是，项目视图是

onBeforeItemAdded

中的第一个参数，因此您可以调用

view.on（'show'，myAnimation）

，以获得更平滑的结果。