Javascript 木偶-应用程序和模块之间的关系
我们目前正在构建一个基于木偶的应用程序。 基本上,我们有一个木偶应用程序,它定义了多个区域。 每个区域将充当不同模块显示其视图的容器。我希望每个模块都能完全控制其容器中显示的内容,但我希望应用程序分配这些区域。为了简单起见,假设每个模块只有一个简单的ItemView 我正在考虑用模块视图填充这些区域的两种方法 第一种方法表示,当每个模块初始化时,它将创建其视图,并调用应用程序在指定区域显示其视图,例如:Javascript 木偶-应用程序和模块之间的关系,javascript,backbone.js,marionette,Javascript,Backbone.js,Marionette,我们目前正在构建一个基于木偶的应用程序。 基本上,我们有一个木偶应用程序,它定义了多个区域。 每个区域将充当不同模块显示其视图的容器。我希望每个模块都能完全控制其容器中显示的内容,但我希望应用程序分配这些区域。为了简单起见,假设每个模块只有一个简单的ItemView 我正在考虑用模块视图填充这些区域的两种方法 第一种方法表示,当每个模块初始化时,它将创建其视图,并调用应用程序在指定区域显示其视图,例如: var app = new Marionette.Application(); app.ad
var app = new Marionette.Application();
app.addRegions({
regionA: "#regionA",
regionB: "#regionB"
});
app.module("moduleA", function(moduleA, app, ...){
moduleA.on("start", function(){
var viewA = new MyViewA();
app.regionA.show(viewA);
}
});
app.module("moduleB", function(moduleB, app, ...){
moduleB.on("start", function(){
var viewB = new MyViewB();
app.regionB.show(viewB);
}
});
第二种方法说每个模块应该公开一些返回其视图的函数。应用程序将在准备就绪时调用该函数,并将视图粘贴到指定区域
我不确定哪种方法更好,也很乐意听取您的意见。这取决于您采用哪种方法,两者都可以,我们选择第二种方法,因为我们使用require.js动态加载模块
var dashboardPage = Backbone.Marionette.Layout.extend({
template: Handlebars.compile(tmpl),
regions: {
graphWidget : "#graphWidget",
datePickerWidget: "#datePickerWidget",
searchWidget : "#searchWidget"
},
widget: {
graphWidget: null,
datePickerWidget: null,
searchWidget: null,
},
initialize: function(options){
this.someId= options.someId;
//if have someId ID - fetch model;
if(this.someId){
//fetch model if campaignId not null
this.modelAjax = this.model.fetch();
}
onShow: function() {
var that = this;
if(this.modelAjax){
this.modelAjax.done(function(){
that.widget.graphWidget= new graphWidget(graphWidgetOptions);
that.listenTo(that.widget.graphWidget, 'graphWidget', that.getGraphWidgetData, that);
....
that.graphWidget.show(that.widget.graphWidget);
that.datePickerWidget.show(that.widget.datePickerWidget);
我肯定会选择第二种方法,在过去选择了第一种方法之后,我现在发现了这种方法的局限性,转而选择第二种方法。我写了一篇关于它的博文非常真实。模块应该提供一个“容器”视图来呈现模块。它不必担心如何在DOM中显示它:这是应用程序的工作。保持关注点的分离。