7

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

我的架构

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

4

1 回答 1

5

我还为我的应用程序使用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 中的字符串替换
于 2012-06-08T20:00:47.823 回答