Backbone.js 向布局动态添加/删除区域
是否可以使用木偶向布局动态添加和删除区域?我的应用程序需要能够从布局中推送和弹出区域。这类似于在项目的源代码中向下搜索时GitHub推送和弹出视图的方式。在显示下一个视图时,它们具有幻灯片动画,然后在您退出时,它会向后滑动。我的想法是,我需要保留以前的观点。另一个类比是UINavigationController在iOS上的工作方式Backbone.js 向布局动态添加/删除区域,backbone.js,marionette,Backbone.js,Marionette,是否可以使用木偶向布局动态添加和删除区域?我的应用程序需要能够从布局中推送和弹出区域。这类似于在项目的源代码中向下搜索时GitHub推送和弹出视图的方式。在显示下一个视图时,它们具有幻灯片动画,然后在您退出时,它会向后滑动。我的想法是,我需要保留以前的观点。另一个类比是UINavigationController在iOS上的工作方式 或者,我应该定义一个自定义布局,能够动态地添加和删除区域?我不确定,但您可能会对某些html的存在和该html的显示感到困惑 我的意思是,您可以对项目进行合成查看,
或者,我应该定义一个自定义布局,能够动态地添加和删除区域?我不确定,但您可能会对某些html的存在和该html的显示感到困惑
我的意思是,您可以对项目进行合成查看,并且一次只能显示其中一个项目。然后使用jQuery animate或其他动画库在CompositeView的项目中移动 我最终实现了一个容器视图来满足我的需要。它清理事件参考,就像你在木偶中期望的那样
是的,这是可能的。这是我使用的代码 布局:
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);
}
});
你能再解释一下这个场景吗?我不知道你所说的“推动”和“流行”在一个地区是什么意思。也许还有一些您认为应该是什么样的示例代码?谢谢。在文档中,“如果你两次指定同一个区域名称,那么最后一个区域名称将获胜。”我想知道德里克是否可以对动态区域命名的方法发表评论…?你说的“动态区域命名”是什么意思?@DerickBailey请参见上面的编辑。@DerickBailey我想我误解了这个问题。。。我的想法是,它可能是有用的人能够命名他们的地区动态的东西。。。b/c区域名称是对象中的键,要使该键成为动态键并不容易。就像我不能通过myApp.addRegions({“itemRegion”+nextRegion:#temp})创建一个区域一样;取而代之的是,它必须被重新分解以调用新的区域,比如myApp.addRegions(“regionName”、“regionTemplate”);因为钥匙就是钥匙。我不确定它是否有任何用例,尽管b/c并不能解决他的问题,我不认为。
<script type="text/template" id="append-layout-template">
<<%= tag %> id='<%= id %>' class='<%= className %>'></<%= tag %>>
</script>
var view = new SomeView();
// the region name will be a part of a unique id
var layout = new Layout({ regionName: 'myRegion' });
// add a dynamic region to the layout and a view to that region
layout.append(view);
// same as above (you have to name the id and class yourself)
var regionId = 'myRegionId';
layout.appendEmpty(regionId, 'someClassName', 'span');
layout.getRegion(regionId).show(view);
// remove a region
layout.customRemove(regionId);