1

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

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

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

4

3 回答 3

5

这是一种方法：

在CompositeView声明中包含这些函数：

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

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

这类似于我在关于木偶的书中提出的解决方案 ( https://leanpub.com/marionette-gentle-introduction/ )

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

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

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

于 2013-05-22T16:35:33.510 回答
2

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();
        }   
    }
于 2014-07-01T18:59:08.620 回答
0

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

myCollectionView.on( "render", function() {
   this.on( "after:item:added", executeMyAnimation );
});
于 2013-05-21T22:46:34.427 回答