javascript - Dojo での動的コンテンツの単一ページ・アプリケーション

Question

基本的には、このようになります。Dojo ボイラープレートプロジェクト/テンプレート (Github から) を使用して、非常に構造化された Dojo アプリケーションを作成しています。アプリケーションをあるべき姿にするために、さまざまなモジュールをほぼすべて完成させました (cms のようなものです)。そのため、一部の領域でコンテンツを動的にレンダリングする単一ページアプリケーションです。

私の EntryPoint.html は次のようになります。

<div style="height:100%;">
    <div
            data-dojo-type="dijit.layout.BorderContainer"
            data-dojo-attach-point = "appLayout"
            data-dojo-props="design: 'headline'"
            style="height:100%;">

        <div
                class="centerPanel"
                data-dojo-type="dijit.layout.ContentPane"
                data-dojo-props="region: 'center'">

                <button data-dojo-attach-point ="testButton" type="button" disabled="disabled">Click Me!</button>
            <div id="placeholder"></div>
        </div>
        <div
                class="edgePanel"
                data-dojo-type="dijit.layout.ContentPane"
                data-dojo-props="region: 'top'">Header content (top)
                <span class="test"></span>
            </div>
        <div
            id="leftCol" class="edgePanel"
            data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region: 'left', splitter: true">

            <div id="administrationMenu" class="administrationMenu">
                <div class="administrationTitle"> Administration </div>
                <ul>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/user.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Users </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/email.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Emails </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/tools.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Settings </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/graph.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Logs </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/faq.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Help </a></li>
                </ul>
            </div>

            <div id="toolsMenu" class="toolsMenu">
                <div class="toolsTitle"> Managing tools </div>
                <ul>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/donwload.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Resources </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/play.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Playlists </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/clock.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Agenda </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/monitor.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Stations </a></li>
                </ul>
            </div>

        </div>
    </div>
</div>

*もちろん、自分のイメージが css に含まれている必要があることはわかっていますが、私は実際にはデザイナーではなく、インターフェイスの作成/微調整があまり好きではありません。

私の EntryPoint.js:

define([
    "dojo/_base/declare",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",

    "./ui/layout/GridLayout",

    "dojo/text!./ui/templates/EntryPoint.html",

    "dijit/layout/BorderContainer",
    "dijit/layout/TabContainer",
    "dijit/layout/ContentPane"
], function(
    declare,
    _Widget,
    _TemplatedMixin, 
    _WidgetsInTemplateMixin,

    GridLayout,
    template
){
    return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {

        templateString: template,

        constructor: function() {

        },

        postCreate: function() {
            //var gridLayout = new GridLayout({}, "placeholder");
            //gridLayout.placeAt("placeholder");
        }

    });
});

さて、基本的には、さまざまなリスト ( administrationMenuとtoolsMenu )をクリックできるようにしたいと思います。したがって、コンテンツがcenterPanel内でロード/レンダリングされるようにします。さらに、クリック項目を URL に含めたいと考えています。

ユースケースシナリオ: 初めてアプリケーションをロードすると、ホームページがロードされます。次に、メニュー項目 (設定など) をクリックすると、設定ページが読み込まれます。URL は www.myapp.com/settings のように変わります。

ありがとうございました。

考えられる解決策: メニューごとに、data-dojo-attach-point を使用して名前を指定します。それぞれに dojo.query("").connect を使用し、カスタムコード (例: new SettingsPage ) からインスタンスを作成し、centerPanel でレンダリングします...

score 2 · Accepted Answer

さまざまなウィジェットをコンテンツペインにロードする、同様の設定、1つの「リスト」があります。下部にリンクされているコードは、ロードスピナーの機能があり、アンロード時に汚れをチェックし、多くの要求/ガベージコレクションを実行するため、少し複雑です。

最も単純なシナリオは、エントリをリストするdijit.Treeを作成することです。たとえば、次のようなjson構造を使用します。

adminJson = { identifier:'url', items: [
     { url: 'admin/user', label: 'user' },
     { url: 'admin/email', label: 'email' }
];

Treeで、これを特定のコンテンツペイン（たとえばcenterPanel ）に「リンク」します。

tree.on("click", function (item) { // refer to paneRequested
   dijit.byId('centerPanel').set("href", this.model.store.getValue(item, 'url'));
});

アイテムではなくツリーを<li>使用すると、すべてのアイコンを使用してスプライトシートを作成し、iconClassを使用して正しいアイコンを設定するなどのオプションが得られます。例：

<style>
.administrationListTree .dijitTreeNode .iconNode {
  background: url(.....app/resources/img/silver-gray/adminsprites.png) top left no-repeat transparent;
}
.administrationListTree .dijitTreeRow .iconNode.user { background-position: 0 0; }
.administrationListTree .dijitTreeRow .iconNode.email { background-position: -20px 0; }
</style>
<script>
new dijit.Tree({
   getIconClass: function(item, opened) {
      return item.label;
   }
});
</script>

https://github.com/mschr/oocms/blob/master/admin/include/application.jsでいくつかの追加のトリックを確認し、 dtopic.publish （ "notify / progress /？"）をスキップしてモジュール=[？]パーツ。
ただし、「administrationMenu」という名前が付いているので、unloadPaneの前のアクションが興味深いと思います。各スイッチは、1）AbstractController.isDirtyを呼び出すか、2）カスタムチェックを実装します。次に、ユーザーが許可するか、保留中の変更がない場合にのみアンロードします。

score 1 · Accepted Answer

dojo.back を使用してロケーション・バーの URL を変更し、ブラウザーの戻る/進む機能を正しく機能させることができます。

http://dojotoolkit.org/reference-guide/1.7/dojo/back.html

「設定ページ」は、サーバーからロードされた html ページですか、それともブラウザ上でページを作成する役割を担う dojo ウィジェットですか? HTML ページの場合は、@mschr の回答が役に立ちます。

「設定ページ」をウィジェットにしたい場合は、中央のパネルをdijit.StackContainer. メニュー項目を選択するときは、適切な子ウィジェットを作成してに追加StackContainerし、サーバーへのバックグラウンド呼び出しを行って必要な json データを取得します。

http://dojotoolkit.org/reference-guide/1.7/dijit/layout/StackContainer.html

javascript - Dojo での動的コンテンツの単一ページ・アプリケーション

2 に答える 2

Related

Reference