2013-02-20 79 views
8

我們正在構建基於木偶的應用程序。 基本上,我們有一個在其上定義了多個區域的木偶應用程序。每個區域將充當不同模塊的容器以顯示其視圖。我希望每個模塊都能完全控制容器中顯示的內容,但我希望應用程序分配這些區域。爲了簡單起見,假設每個模塊只有一個簡單的ItemView。木偶 - 應用程序和模塊之間的關係

我正在考慮2種方法來使用模塊視圖填充這些區域。

第一種方法說,當每一模塊被初始化時,它會創建視圖,它會調用應用程序中所指定的區域,以顯示其視圖,例如:

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); 
    } 
}); 

第二方法說每個模塊應該公開一些返回其視圖的函數。應用程序將在準備就緒時調用該函數,並將視圖粘貼到指定區域。

我不確定哪種方法更好,並樂於聽取意見。

回答

7

我肯定會用第二種方法去,在經歷與過去的我現在打這種方法的侷限性,並移動到第二個方法的第一種方法之後。我寫了一篇關於它的博客文章here

+0

非常真實。模塊應該提供一個「容器」視圖來渲染模塊。它不應該擔心如何在DOM中顯示它:這是應用程序的工作。保持關注的分離。 – tonyhb 2013-11-08 05:32:45

0

它取決於你採用哪種方法,都很好,我們選擇第二個選項,因爲我們使用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);