Вид марионетки - почему нужен шаблон

Question

Несмотря на то, что несколько раз читал документы о марионетке, я все еще не в состоянии полностью понять некоторые аспекты этого вопроса.

Я создаю макет «AppLayout», как показано ниже:

var AppLayoutView = Marionette.LayoutView.extend({ 

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

HTML-фрагмент для моего приложения испытывает два Dóm узлов для определенных выше областей:

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

    }); 

Это дает мне ошибку не можете RENDE r шаблон, так как он является null или undefined.

Я думал, что по умолчанию рендеринга() поведение макета всегда ищет шаблон, так что я выкатил свою собственную версию визуализации, как показано ниже:

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

На этот раз, я получаю другую ошибку говоря , «el» #ecp_layout_region должен существовать в DOM. Однако я уверен, что этот элемент существует в 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' 
... 
});