Dojo MVCのレイアウト実装

Question

最初から良い方法を試して、dojoプロジェクトをゼロから始めました。私はdojoツールキットにはまったく新しいので、たくさんのドキュメンテーションやサンプルを歩き回っています。これで、たくさんのクールなものが残っていますが、将来のdev（またはアドオン）用のアーキテクチャを実装する方法はありません。私はウェブを検索して、これをすべてまとめて良いスタートと思われるdojo boilerplate projectを見つけましたが、何かもっと欲しかった、私はMVCパターンを実装したかったのです（私はJAVAとRubyのRubyの経験が豊富です）。私のアプリケーションとこれを見つけたvery cool example。だから、私はこのようなものを作った。これは私のプロジェクトを整理するのにかなり正当な方法だと思われる。私が間違っているなら、私を訂正してください。あなたはよりよいアプローチをしています。

は今、私が開始する準備ができています。私はdojoのツールキット・ウェブサイトに関するいくつかのチュートリアルを試しました。 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とmy textですが、レイアウトはまったくありません。私は何が欠けていますか？

私の解決策：インデックス（例：「コンテナ」）にdivのみを作成し、ローダ（app/run.js）（mainという別のスクリプトを呼び出します）からdivを作成し、このmain.jsファイル私が慣れ親しんでいるAMDの概念を使用しており、彼は自分のアプリケーションのインスタンスの作成を処理しています。ですから、例えば、私はそのファイルに私のレイアウトとインスタンスのためにそれを特定のビューを作成することができます...

Answer 1

私は自分のアプリケーションのためにもdojo boilerplate projectを使用し、これが私の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テンプレートは、あなたのレイアウトテンプレートは、使用することができます
• にdata-dojo-attach-pointとdata-dojo-attach-eventを使用することができ道場のビルドシステム
• と箱から出して動作します${i18n.title.members} htmlの文字列置換用