木偶佈局視圖 - 爲什麼需要模板

Question

儘管幾次閱讀木偶文檔，我仍然無法正確理解它的某些方面。

我創建一個佈局圖「AppLayout」如下：

var AppLayoutView = Marionette.LayoutView.extend({ 

    regions: { 
     headerRegion: "#ecp_header", 
     bodyRegion: "#ecp_layout_region" 
    }, 
    ... 

我的應用程序的HTML代碼段由具有上面定義的區域這兩個DOM節點：

<div id="ecp_header"></div> 

    <div class="container" id="ecp_layout_region"> 
     <div class="row" id="ecp_body"> 
      ... 

在應用

。 JS，我的調用代碼是這樣的..

ECPApp.on('start', function() { 
    require(['controller_cp', 'header_view'], function(ControllerCP, HeaderView) { 
     console.log("On start event executing..."); 

     // create a event aggregator vent object and attach to app. 
     ECPApp.vent = new Backbone.Wreqr.EventAggregator(); 

     var appLayoutView = new AppLayoutView(); 
     appLayoutView.render(); 
     //appLayoutView.showLayout(); 

     //$('div.toolbar > ul > li:first > a').tab('show'); 
     if (Backbone.history) Backbone.history.start(); 

    }); 

這給了我錯誤不能仁德r模板，因爲它是空的或未定義的。

我認爲默認渲染（）佈局的行爲總是尋找一個模板，所以我推出我自己的版本呈現，如下：

render: function() { 
    var $self = this; 

    /* if no session exists, show welcome page */ 
    var promise = ECPApp.request('entities:session'); 
    promise.done(function(data) { 
     if (data.result==0) { 
      console.log('Valid session exists. Showing home page...!'); 
      $self.showHome(); 
     } else { 
      console.log('No session exists. Showing welcome page...!');    
      $self.showWelcome();      
     } 
    }).fail(function(status) { 
     console.log('No session exists. Showing welcome page...!');    
     $self.showWelcome(); 
    }); 
     return $self; 
    }, 

    showWelcome: function() { 
     var self = this; 
     require(['header_view', 'welcome_view'], 
       function(HeaderView, WelcomeView) { 
      var headerView = new HeaderView();   
      var welcomeView = new WelcomeView(); 
      self.bodyRegion.show(welcomeView);    
     }); 
    } 

這一次，我得到另一個錯誤說，DOM中必須存在「el」#ecp_layout_region。但是我確定該元素是存在於DOM中的，因爲我可以通過檢查調試控制檯窗口來看到它。運行$（'＃ecp_layout_region'）會顯示一個有效的元素。

木偶佈局視圖很混亂。展望未來，我需要多個嵌套視圖。我被困在這裏。

Answer 1

你的模板是如何定位的？您的模板是否由<script type = 「text/template」>標籤包裝？ 它可能看起來像這樣：

裏面你的HTML，在head部分：

<script type = 「text/template」 id="yourLayout"> 
    <div id="ecp_header"></div> 
    <div class="container" id="ecp_layout_region">...</div> 
</script> 

而且在佈局定義：

var AppLayoutView = Marionette.LayoutView.extend({ 
    template: '#yourLayout' 
... 
});