Implementación de diseño para Dojo MVC

Question

Inicié un proyecto de dojo desde cero al intentar usar buenas prácticas desde el principio. Soy realmente nuevo en el conjunto de herramientas de dojo, así que estoy recorriendo montones de documentaciones y muestras que me dejan un montón de cosas interesantes, pero no hay forma de cómo implementar una arquitectura para futuros desarrolladores (o complementos). He buscado en la web y encontré este dojo boilerplate project, que parece ser un buen comienzo para ponerlo todo junto, pero quería algo más, quería implementar el patrón MVC (tengo mucha experiencia con JAVA y Ruby on rails dev) en mi aplicación y se encontró con este very cool example. Entonces, creé algo como esto que parece una forma bastante legítima de organizar mi proyecto. Corrígeme, si me equivoco ... o tienes un mejor enfoque.

Ahora, yo estoy listo para comenzar. He intentado un par de tutoriales en el sitio web dojo toolkit. Ejecuta maravillosamente cuando solo tienes una página. Pero en este momento, me preguntaba cómo implementaría este layout tutorial en mi propia aplicación. Quiero que este tipo de diseño a ser mi principal diseño para mi aplicación (así, yo tenía tratado de esas piezas de código en mi 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> 

pero no obtenemos:

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

Así que el resultado es básicamente el div y mi texto, pero no el diseño en absoluto. ¿Qué me estoy perdiendo?

Mi solución: crearía solo un div en mi índice (por ejemplo, "contenedor") y lo alimentaría desde el cargador (app/run.js), (que llama a otro script llamado main), este archivo main.js está usando el concepto de AMD (que estoy empezando a ser familiar), y él está manejando la creación de cualquier instancia de mi aplicación. Así, por ejemplo, podría crear una visión específica para mi diseño y la instancia en ese archivo ...

Answer 1

utilizo también dojo boilerplate project para mis aplicaciones y esta es mi 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 
    } 
}); 

Mi EntryPoint módulo/clase es un widget, es decir EntryPoint.js parece:

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 mi 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> 

[...] 

La ventaja de usar Widget como su diseño principal:

• plantilla HTML funciona fuera de la caja con el sistema dojo acumulación
• puede utilizar data-dojo-attach-point y data-dojo-attach-event en su plantilla de diseño
• puede utilizar ${i18n.title.members} para sustitución de cadena en html