7

私は最初から良い習慣を使って道場プロジェクトをゼロから始めました。私はdojoツールキットを初めて使用するので、たくさんのドキュメントやサンプルを見て回っています。これにより、たくさんのすばらしいものが残りますが、将来の開発（またはアドオン）用のアーキテクチャを実装する方法はわかりません。Webを検索して、この道場ボイラープレートプロジェクトを見つけました。これは、すべてをまとめるのに良いスタートのようですが、もっと何かが欲しかったので、MVCパターンを実装したいと思いました（JAVAとRuby onrailsdevの経験が豊富です。 ）私のアプリケーションで、この非常にクールな例に出くわしました。それで、私はこのようなものを作成しました。これは私のプロジェクトを整理するためのかなり合法的な方法のようです。私が間違っている場合は、私を訂正してください..またはあなたはより良いアプローチを持っています。

私のアーキテクチャ

今、私は始める準備ができています。dojoツールキットのWebサイトでいくつかのチュートリアルを試しました。ページが1つしかない場合は、見事に実行できます。しかし今、私はこのレイアウトチュートリアルを自分のアプリケーションにどのように実装するのか疑問に思っていました。この種のレイアウトをアプリケーションのメインレイアウトにしたいので（そのため、これらのコードを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 に答える