我知道我可以使用以下方法覆盖所有区域以添加淡入淡出过渡。
Marionette.Region.prototype.open = function(view){
this.$el.hide();
this.$el.html(view.el);
this.$el.fadeIn()
}
有没有办法只覆盖特定区域或视图?我的布局中有某些区域我希望能够淡入,而其他区域应该立即渲染。
谢谢,
dk
我知道我可以使用以下方法覆盖所有区域以添加淡入淡出过渡。
Marionette.Region.prototype.open = function(view){
this.$el.hide();
this.$el.html(view.el);
this.$el.fadeIn()
}
有没有办法只覆盖特定区域或视图?我的布局中有某些区域我希望能够淡入,而其他区域应该立即渲染。
谢谢,
dk
您可以Region
像定义任何 Backbone 对象一样定义自定义,并将此代码添加到该区域类型。
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"})
});
我刚刚使用的另一个选项是覆盖动画的 open 方法是创建一个单独的配置文件,覆盖该配置文件中的 open 方法,以及测试类名的条件逻辑。所以这就是我使用咖啡脚本和 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