Backbone Marionette - 切换视图时添加视觉效果

Question

当我离开页面(关闭视图/布局)并在同一区域中打开一个新的效果时,是否有一种方便的方法来添加效果？(像淡化效果)

Answer 1

木偶区域有一个方法open,默认情况下只需用新视图替换旧视图的HTML.您可以覆盖此方法以执行您喜欢的任何动画.来自该地区的文件:

设置视图如何el附加

如果在通过区域显示视图时需要更改视图附加到DOM的open方式,请覆盖该区域的方法.此方法接收一个参数 - 要显示的视图.

默认实现open是:

Marionette.Region.prototype.open = function(view){
  this.$el.html(view.el);
}

这将用视图el/内容替换区域的 内容.您可以将此更改为您希望的任何内容,从而促进转换效果等.

Marionette.Region.prototype.open = function(view){
  this.$el.hide();
  this.$el.html(view.el);
  this.$el.slideDown("fast");
}

此示例将导致视图从区域顶部向下滑动,而不是仅仅显示在原位.

Answer 2

您可以覆盖close视图上的函数,执行以下操作:

close: function () {
  // fancy fade-out effects
  Backbone.Marionette.View.prototype.close.apply(this, arguments);
}

并执行与您的render功能类似的操作.

Answer 3

这似乎对我有用:

this.views = {
    messageItem: Marionette.ItemView.extend({
        template: Handlebars.templates.messaging_item,
        tagName: "li",
        className: "messaging-item",
        render: function(){
            this.$el.html(this.template(this.model.attributes));
            this.$el.hide();
        },
        onShow: function(){
            this.$el.slideDown(800);
        }
    })
};