在Backbone.Marionete环境中设置视图以获得子视图列表的适当方法是什么,无需手动渲染,并尽可能少地使用memmory。
具有子视图的视图基于模板呈现,并且是选项卡控件选项卡的一部分。选项卡视图的tamplete有div,用作子控件的一个placholders(两个集合视图和两个辅助控件)
我已经提出了几个方法:
1)在render方法中创建视图实例,并将它们附加到使用render方法硬编码选择器的propper el。
2)扩展marionete布局并为每个视图声明一个区域。
var GoalsView = Marionette.Layout.extend({
template: '#goals-view-template',
regions: {
content: '#team-goals-content',
homeFilter: '#team-goals-home-filter',
awayFilter: '#team-goals-away-filter'
},
className: 'team-goals',
initialize: function () {
this.homeFilterView = new SwitchControlView({
left: { name: 'HOME', key: 'home' },
right: { name: 'ALL', key: 'all' },
});
this.awayFilterView = new SwitchControlView({
left: { name: 'AWAY', key: 'away' },
right: { name: 'ALL', key: 'all' },
});
this.сontentView = new GoalsCollecitonView({
collection: statsHandler.getGoalsPerTeam()
});
},
onShow: function () {
this.content.show(this.сontentView);
this.homeFilter.show(this.homeFilterView);
this.awayFilter.show(this.awayFilterView);
}
});
这是很酷的方式,但我担心维护区域集合的开销会始终显示单一视图。
3)我用以下逻辑扩展了木偶项目视图:
var ControlsView = Marionette.ItemView.extend({
views: {},
onRender: function() {
this.bindUIElements();
for (var key in this.ui) {
var view = this.views[key];
if (view) {
var rendered = view.render().$el;
//if (rendered.is('div') && !rendered.attr('class') && !rendered.attr('id')) {
// rendered = rendered.children();
//}
this.ui[key].html(rendered);
}
}
}
});
这让我可以编写以下代码
var AssistsView = ControlsView.extend({
template: '#assists-view-template',
className: 'team-assists',
ui: {
content: '#team-assists-content',
homeFilter: '#team-assists-home-filter',
awayFilter: '#team-assists-away-filter'
},
initialize: function () {
this.views = {};
this.views.homeFilter = new SwitchControlView({
left: { name: 'HOME', key: 'home' },
right: { name: 'ALL', key: 'all' },
});
this.views.awayFilter = new SwitchControlView({
left: { name: 'AWAY', key: 'away' },
right: { name: 'ALL', key: 'all' },
});
this.views.content = new AssistsCollecitonView({
collection: statsHandler.getAssistsPerTeam()
});
}
});
但它确实会泄漏memmory,我觉得我不能编写正确的代码来处理memmory泄漏。
所以一般来说,我想要的是有一个很好的声明方式来创建一个视图,其他视图作为控件,保护再次发生内存泄漏和最少的内存消耗......
P.S。对不起文字墙
答案 0 :(得分:3)
为什么不简单地使用布局并在布局的区域内显示您的视图?您可以在此处查看示例:https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L43-L46