Question

我正在使用Marionette的CollectionView来呈现带有ItemViews的项目列表。每当添加一个新项目时，我想运行一个简短的淡入动画。但不是在最初渲染集合时（或重置集合）。

在使用Marionette之前，我对reset和add事件的处理略有不同，但我无法弄清楚如何在此处执行此操作。我查看了源代码，似乎addItemView负责添加子视图，addChildView（在集合上触发add时调用）和render（对于reset个事件，请调用此方法。

也许我错过了一些明显的东西。

Answer 1

这是一种方法：

在CompositeView声明中包含这些功能：

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

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

这类似于我在Marionette（https://leanpub.com/marionette-gentle-introduction/）

一书中提出的解决方案

工作原理：Marionette在呈现整个集合之前触发“before：render”，因此您可以将onBeforeItemAdded函数设置为什么都不做。渲染集合后，将该函数设置为为新项目视图设置动画。

每次集合视图添加项目视图时，它也会触发“before：item：added”，您可以定义一个onBeforeItemAdded函数，该函数将在触发该事件时自动调用。由于triggerMethod，这种匹配发生。

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

Answer 2

David Sulc的答案非常hacky，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();
        }   
    }

Answer 3

我认为您最好的选择是在渲染CollectionView后绑定您的事件。

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

Marionette CollectionView：如何检查项目是否因“重置”或“添加”而被添加？

3 个答案: