Dojo MVC 的布局实现

我从头开始了一个道场项目，从一开始就尝试使用良好的实践。我对 dojo 工具包非常陌生，所以我正在浏览大量文档和示例，这些文档和示例给我留下了很多很酷的东西，但无法了解如何为未来的开发（或附加组件）实现架构。我在网上搜索并找到了这个dojo 样板项目 https://github.com/csnover/dojo-boilerplate这似乎是将所有这些放在一起的一个良好的开始，但我想要更多的东西，我想在我的应用程序中实现 MVC 模式（我在 JAVA 和 Ruby on Rails 开发方面有很多经验），并遇到了这个非常酷的例子 https://github.com/rmurphey/dojo-demo。所以，我创建了这样的东西，这似乎是组织我的项目的一种非常合法的方式。如果我错了，请纠正我......或者你有更好的方法。

现在，我准备开始了。我在 dojo 工具包网站上尝试了一些教程。当您只有一页时，运行效果非常好。但现在我想知道如何实现这个布局教程 http://dojotoolkit.org/documentation/tutorials/1.7/dijit_layout/到我自己的应用程序中。我希望这种布局成为我的应用程序的主要布局（因此，我尝试将这些代码片段放入我的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>

但它没有得到：

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

所以结果基本上是 div 和我的文本，但没有任何布局。我缺少什么？

我的解决方案：我会在我的索引上仅创建一个div（例如“容器”）并从加载器（app/run.js）中为其提供数据（它调用另一个名为main的脚本），这个main.js文件正在使用这个概念AMD 的（我开始熟悉了），他正在处理我的应用程序的任何实例的创建。因此，例如，我可以为我的布局创建一个特定的视图，并在该文件上实例化它......

我也用dojo 样板项目 https://github.com/csnover/dojo-boilerplate对于我的应用程序，这是我的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
    }
});

My EntryPoint模块/类是一个小部件，即EntryPoint.js好像：

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

    });
});

最后我的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> 

[...]

使用的优点Widget作为您的主要布局：

• html 模板可以与 dojo 构建系统一起使用
• 您可以使用data-dojo-attach-point and data-dojo-attach-event在您的布局模板中
• 您可以使用${i18n.title.members}用于 html 中的字符串替换