Implementazione del layout per Dojo MVC

Question

Ho iniziato da zero un progetto dojo cercando di utilizzare le buone pratiche sin dall'inizio. Sono davvero nuovo nel dojo toolkit, quindi sto attraversando un sacco di documentazioni e campioni che mi lasciano un sacco di cose interessanti, ma non c'è modo su come implementare un'architettura per i futuri sviluppatori (o add-on). Ho cercato sul web e ho trovato questo dojo boilerplate project che sembra essere un buon inizio per mettere tutto insieme, ma volevo qualcosa in più, volevo implementare il pattern MVC (ho molta esperienza con JAVA e Ruby on rails dev) in la mia domanda e ho trovato questo very cool example. Così, ho creato qualcosa di simile che sembra un modo abbastanza legittimo per organizzare il mio progetto. Correggimi, se sbaglio ... o hai un approccio migliore.

Ora, io sono pronto per iniziare. Ho provato un paio di tutorial sul sito web del toolkit dojo. Corri meravigliosamente quando hai solo una pagina. Ma ora mi chiedevo come implementare questo layout tutorial nella mia applicazione. Voglio che questo tipo di layout per essere il mio layout principale per la mia domanda (così, ho provato a avuto quei pezzi di codice nel mio index.html),

<div 
     id="appLayout" class="demoLayout" 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="design: 'headline'"> 
    <div 
      class="centerPanel" 
      data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region: 'center'"> 
     <div> 
      <h4>Group 1 Content</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
     <div> 
      <h4>Group 2 Content</h4> 
     </div> 
     <div> 
      <h4>Group 3 Content</h4> 
     </div> 
    </div> 
    <div 
      class="edgePanel" 
      data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region: 'top'">Header content (top)</div> 
    <div 
     id="leftCol" class="edgePanel" 
     data-dojo-type="dijit.layout.ContentPane" 
     data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div> 
</div> 

ma non ottiene:

require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer", 
     "dijit/layout/ContentPane", "dojo/parser"]); 

Quindi il risultato è fondamentalmente il div e il mio testo, ma nessun layout di sorta. Cosa mi manca?

La mia soluzione: Vorrei solo creare un div sul mio indice (ad esempio, "contenitore") e dargli da mangiare dal caricatore (APP/run.js), (che chiamano un altro script chiamato principale), questo file main.js sta usando il concetto di AMD (che sto iniziando a conoscere) e sta gestendo la creazione di qualsiasi istanza della mia applicazione. Così, per esempio, ho potuto creare una vista specifica per il mio layout e l'istanza su quel file ...

Answer 1

Io uso anche dojo boilerplate project per le mie applicazioni e questo è il mio main.js:

define([ 'dojo/has', 'require', 'dojo/_base/sniff' ], function (has, require) { 
    var app = {}; 

    if (has('host-browser') && isCompatible()) { 

     require([ './EntryPoint', 'dojo/domReady!' ], function (EntryPoint) { 
      app.entryPoint = new EntryPoint().placeAt(document.body); 
      app.entryPoint.startup(); 
    } else { 
     window.location = "/admin/browser/"; 
    } 

    function isCompatible() { 
     // browser compatibility check here 
    } 
}); 

mio modulo EntryPoint/classe è un widget, cioè EntryPoint.js assomiglia:

define([ 
    "dojo/_base/declare", 
    "dijit/_Widget", 
    "dijit/_TemplatedMixin", 
    "dijit/_WidgetsInTemplateMixin", 

    "dojo/i18n!app/nls/main", 
    "dojo/text!./ui/templates/EntryPoint.html", 

    "dijit/layout/BorderContainer", 
    "dijit/layout/StackContainer", 
    "dijit/layout/ContentPane" 
], function(
    declare, 
    _Widget, 
    _TemplatedMixin, 
    _WidgetsInTemplateMixin, 

    i18n, 
    template 
){ 
    return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], { 

     templateString: template, 
     i18n: i18n, 

     postCreate: function() { 
      //... 
     } 

    }); 
}); 

Finalmente il mio EntryPoint.html:

<div style="height:100%;"> 
    <div 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="design: 'sidebar', gutters: false" 
     data-dojo-attach-point="mainContainer" 
     style="height:100%;" 
    > 

    <div 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="region: 'left', splitter: true, design: 'headline', gutters: false" 
     data-dojo-attach-point="sidebarPane" 
     class="sidebarPane" 
    > 

     <div 
      data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region: 'center'" 
     > 

     <div class="sidebarSection">${i18n.title.public_}</div> 
     <div 
      id="sidebar-posts" 
      data-dojo-type="app.widget.SidebarItem" 
      data-dojo-props="iconClass: 'sidebarIconPosts', value:'posts', name: 'sidebar'"> 
      ${i18n.title.posts} 
     </div> 
     <div 
      id="sidebar-pages" 
      data-dojo-type="app.widget.SidebarItem" 
      data-dojo-props="iconClass: 'sidebarIconPages', value:'pages', name: 'sidebar'"> 
      ${i18n.title.pages} 
     </div> 

[...] 

Il vantaggio di utilizzare Widget come il layout principale:

• template HTML funziona out of the box con sistema di dojo accumulo
• è possibile utilizzare data-dojo-attach-point e data-dojo-attach-event nel vostro modello di layout
• è possibile utilizzare ${i18n.title.members} per la sostituzione delle stringhe in html