2015-01-06 35 views
14

Jestem zdezorientowany przez dokumentację marionetek (2.3.0) z poniższego linku, który mówi, że funkcja regionów aplikacji jest przestarzała. Zamiast tego należy użyć widoku układu. Czy to oznacza, że ​​nie powinienem już więcej używać MyApp.addRegions()? Jak dodać widok układu do mojej aplikacji?Czego używać, ponieważ obszary aplikacji marionetek są przestarzałe

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

Regiony aplikacyjne

Ostrzeżenie: przestarzałe Funkcja ta jest przestarzała. Zamiast korzystać z aplikacji jako katalogu głównego drzewa widoku, należy użyć widoku układu. Aby rozszerzyć widok układu na cały dokument, można ustawić jego el na "body". Może to wyglądać mniej więcej tak:

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

+0

Rozumiem. Dziękuję @ Oɔɯǝɹ. – Cassandra

+1

możliwy duplikat [MarionetteJS: Regiony aplikacji a układy] (http://stackoverflow.com/questions/27807663/marionettejs-application-regions-vs-layouts) –

Odpowiedz

4

Chciałbym wyjaśnić na bardzo prostym przykładzie wykorzystanie widoku układu w marionetce.

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> 

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

Uwaga starałem bez el elementem wcześniej, ale nie mam szczęścia i jak kiedyś EL: "# someElem" życie było łatwiejsze: