Dojo MVC的布局实现

Question

我从头开始尝试使用良好的实践,从头开始了一个dojo项目.我是dojo工具包的新手,所以我正在浏览大量的文档和示例,这给我留下了很多很酷的东西,但没有办法为未来的dev(或附加组件)实现架构.我在网上搜索过,发现这个dojo样板项目似乎是一个很好的开始,但是我想要更多东西,我想实现MVC模式(我有很多经验,有关JAVA和Ruby on rails dev )在我的应用程序中,遇到了这个非常酷的例子.所以,我创建了这样的东西,这似乎是组织我的项目非常合法的方式.纠正我,如果我错了......或者你有更好的方法.

现在,我准备开始了.我在dojo toolkit网站上尝试了几个教程.当你只有一个页面时,运行得非常好.但是现在,我想知道如何将这个布局教程实现到我自己的应用程序中.我希望这种布局成为我的应用程序的主要布局(所以,我试着把这些代码片段放到我的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(我开始熟悉),他正在处理我的应用程序的任何实例的创建.因此,例如,我可以为我的布局创建一个特定的视图,并在该文件上实例化它...

Answer 1

我也为我的应用程序使用了dojo样板项目,这是我的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
    }
});

我的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和data-dojo-attach-event
• 你可以${i18n.title.members}在html中用于字符串替换