是否可以使用Marionette动态添加和删除区域到布局?我的应用程序需要能够从布局中推送和弹出区域。这类似于当您深入了解项目的源代码时GitHub如何推送和弹出视图。当您展示下一个视图时,它们会滑动动画,然后在您退出时向后滑动。我的想法是,我需要保留以前的观点。另一个类比是UINavigationControllers如何在iOS上运行。
或许我应该定义一个能够动态添加和删除区域的自定义布局?
答案 0 :(得分:1)
我最终实现了一个容器视图以满足我的需求。它清理了你在Marionette中所期望的事件参考。
https://github.com/ayoung/backbone-vs-marionette/blob/marionette/public/js/views/mainContainer.js
答案 1 :(得分:0)
我不确定,但你可能会对某些HTML的存在以及该html的显示感到困惑?
我的意思是你可以制作一个项目的复合视图,并且一次只显示其中一个项目。然后使用jQuery animate或其他动画库来移动CompositeView的Items。
答案 2 :(得分:0)
是的,这是可能的。这是我使用的代码。
布局:
protected function mapUserToObject(array $user)
{
return (new User)->setRaw($user)->map([
'id' => $user['id'], 'nickname' => null, 'name' => $user['first_name'].' '.$user['last_name'],
'email' => isset($user['email']) ? $user['email'] : null, 'avatar' => $this->graphUrl.'/'.$this->version.'/'.$user['id'].'/picture?type=normal',
]);
}
一个有用的模板:
var Layout = Marionette.LayoutView.extend({
initialize: function(options) {
options = _.extend({ regionTag: 'div' }, options);
this.mergeOptions(options, ['regionTag', 'regionName']);
},
template: false,
regions: {},
append: function(view) {
var viewClass = 'dynamic-layout-' + this.regionName,
viewCount = $('.' + viewClass).length + 1,
viewId = this.regionName + '-view-' + viewCount,
$el = $('<' + this.regionTag + '/>', {
id: viewId,
class: viewClass
});
this.$el.append($el);
var region = Marionette.Region.extend({
el: '#' + viewId
});
this.regionManager.addRegion(viewId, region);
this.regionManager.get(viewId).show(view);
},
appendEmpty: function(id, className, tag) {
tag = tag || 'div';
var data = { id: id, className: className, tag: tag };
var $el = Marionette.Renderer.render('#append-layout-template', data);
this.$el.append($el);
var region = Marionette.Region.extend({
el: '#' + id
});
this.regionManager.addRegion(id, region);
},
customRemove: function(regionId) {
this.regionManager.removeRegion(regionId);
}
});
控制器:
<script type="text/template" id="append-layout-template">
<<%= tag %> id='<%= id %>' class='<%= className %>'></<%= tag %>>
</script>