Question

我知道我可以使用以下内容覆盖所有区域以添加淡入淡出过渡。

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

有没有办法只覆盖特定区域或视图？我的布局中有某些区域，我希望能够淡入，而其他区域应该立即渲染。

谢谢，

DK

Answer 1

您可以按照定义任何Backbone对象的方式定义自定义Region，并将此代码添加到该区域类型。


MyRegion = Backbone.Marionette.Region.extend({

  el: "#some-element",

  open: function(view){
    this.$el.hide();
    this.$el.html(view.el);
    this.$el.fadeIn();
  }

});

MyApp.addRegions({
  myRegion: MyRegion
});

请注意，我在区域定义中包含了el。如果要在多个区域中重复使用此功能，则必须创建一个基本区域，并根据需要为每个区域进行扩展。


FadeInRegion = Backbone.Marionette.Region.extend({

  open: function(view){
    this.$el.hide();
    this.$el.html(view.el);
    this.$el.fadeIn();
  }

});

MyApp.addRegions({
  myRegion: FadeInRegion.extend({el: "#some-element"}),
  anotherRegion: FadeInRegion.extend({el: "#another-element"})
});

Answer 2

我刚刚使用的另一个选项是覆盖动画的open方法是创建一个单独的配置文件，覆盖该配置文件中的open方法，以及测试className的条件逻辑。所以这就是我用咖啡脚本和使用Marionette模块所做的。

创建我的观点：

@Item.module "ItemApp.Add", (Add, App, Backbone, Marionette, $,_) ->

    class Add.Item extends Marionette.ItemView

        template: "#add-item"
        className: "add-modal"

在我的配置文件中，我只是测试className来执行所需的动画：

do (Marionette) ->
    _.extend Marionette.Region::,
        open: (view) ->
            if view.el.className == "add-modal"
                console.log "the add-modal has been called"
                @$el.hide()
                @$el.html(view.el)
                @$el.show().animate "left": '0', queue: false

Backbone.Marionette Fade Transition仅适用于特定地区？

2 个答案: