Layout-Implementierung für Dojo MVC

Question

Ich begann ein Dojo-Projekt von Grund auf mit dem Versuch, von Anfang an gute Praxis zu verwenden. Ich bin wirklich neu im Dojo-Toolkit, also laufe ich durch viele Dokumentationen und Samples, die mir eine Menge cooler Sachen hinterlassen, aber keine Möglichkeit, eine Architektur für zukünftige Entwickler (oder Add-Ons) zu implementieren. Ich habe das Internet gesucht und gefunden dojo boilerplate project, die ein guter Start zu sein scheint, um alles zusammen zu setzen, aber ich wollte etwas mehr, ich wollte das MVC-Muster implementieren (Ich habe viel Erfahrung mit JAVA und Ruby on Rails dev) in meine Bewerbung und stieß auf diese very cool example. Also habe ich so etwas erschaffen, was eine recht legitime Art ist, mein Projekt zu organisieren. Korrigiere mich, wenn ich falsch liege ... oder du hast einen besseren Ansatz.

Nun, ich bin startbereit. Ich habe ein paar Tutorials auf der Dojo Toolkit Website ausprobiert. Laufen Sie wunderbar, wenn Sie nur eine Seite haben. Aber jetzt frage ich mich, wie ich diese layout tutorial in meine eigene Anwendung implementieren würde. Ich mag diese Art von Layout mein Haupt Layout für meine Anwendung sein (so habe ich versucht, diese Teile des Codes in meine index.html mußte),

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

aber geht es nicht:

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

Also das Ergebnis ist im Grunde das div und mein Text, aber überhaupt kein Layout. Was vermisse ich?

Meine Lösung: Ich würde nur ein div auf meinem Index (zB "Container") erstellen und ihn aus dem Loader (app/run.js), (die ein anderes Skript namens main aufrufen), diese main.js Datei füttern verwendet das Konzept von AMD (mit dem ich vertraut bin), und er kümmert sich um die Erstellung jeder Instanz meiner Anwendung. So zum Beispiel könnte ich eine bestimmte Ansicht für mein Layout und die Instanz auf dieser Datei erstellen ...

Answer 1

Ich benutze auch dojo boilerplate project für meine Anwendungen und das ist mein 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 
    } 
}); 

Mein EntryPoint Modul/Klasse ist ein Widget, das heißt EntryPoint.js wie folgt aussieht:

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() { 
      //... 
     } 

    }); 
}); 

Schließlich mein 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> 

[...] 

Der von Vorteil Widget als Haupt-Layout mit:

• HTML-Vorlage aus der Box mit Dojo-Build-System arbeitet
• Sie data-dojo-attach-point und data-dojo-attach-event in Ihrem Layout-Vorlage
• können Sie verwenden können ${i18n.title.members} für String-Substitution in html