Cosa usare da quando le Regioni dell'applicazione Marionette sono deprecate

Question

Sono confuso dalla documentazione di Marionette (2.3.0) dal collegamento sottostante che dice che la funzione Regioni applicazioni è deprecata. Al suo posto dovrebbe essere utilizzata una vista layout. Significa che non dovrei usare più MyApp.addRegions()? Allora come dovrei aggiungere la mia vista layout alla mia applicazione?

http://marionettejs.com/docs/marionette.application.html#application-regions

Regioni applicazione

Attenzione: deprecati Questa funzione è deprecato. Invece di utilizzare l'applicazione come radice dell'albero delle viste, è necessario utilizzare una vista Layout . Per adattare la vista Layout all'intero documento, è possibile impostare suo 'el' 'corpo'. Potrebbe essere simile al seguente:

var RootView = Marionette.LayoutView.extend ({el: 'body'});

Answer 1

Mi piacerebbe spiegare con un esempio molto semplice l'utilizzo della vista layout in marionetta.

html

<div id="appDiv"></div> 

    <script type="text/template" id="mainTemplate"> 
     <div id="div1"></div> 
     <div id="div2"></div>  
    </script> 

    <script type="text/template" id="itemTempFirst"> 
     <p>some text item 1 view</p> 
     <p>some text item view 1</p> 
    </script> 

    <script type="text/template" id="itemTempSecond"> 
     <p>some text item 2 view</p> 
     <p>some text item view 2</p> 
    </script> 

Codice JS: -

 var app = new Marionette.Application(); 
    var LayoutViewObj = Marionette.LayoutView.extend({ 
     template:"#mainTemplate", 
     el:"#appDiv", 
     regions:{ 
      reg1:"#div1", 
      reg2:"#div2" 
     } 
    }); 

     var layoutViewInstance = new LayoutViewObj(); 
     layoutViewInstance.render(); 

     var ItemView1Obj = Marionette.ItemView.extend({ 
     template:"#itemTempFirst" 
     }); 

     var ItemView2Obj = Marionette.ItemView.extend({ 
     template:"#itemTempSecond" 
     }); 

     var item1 = new ItemView1Obj(); 

     var item2 = new ItemView2Obj(); 

     layoutViewInstance.getRegion("reg1").show(item1); 

     layoutViewInstance.getRegion("reg2").show(item2); 

Si prega di notare che cercavo senza el elemento in precedenza, ma ho avuto fortuna e, come ho usato el: la vita "# someElem" più facile