Dojo 中的动态内容单页应用

Question

基本上是这样的。我有一个非常结构化的 dojo 应用程序，使用 dojo 样板项目/模板（来自 Github）。我几乎完成了所有不同的模块以使我的应用程序成为它的样子（它有点像 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 中有我的点击项目。

用例场景：当我第一次加载我的应用程序时，它会加载主页。然后，如果我单击我的菜单项（例如设置），它会加载我的设置页面。网址会变成这样：www.myapp.com/settings。

谢谢。

可能的解决方案：对于每个菜单，使用 data-dojo-attach-point 并指定一个名称。对每个使用 dojo.query("").connect 并从我的自定义代码（例如 new SettingsPage ）创建一个实例并将其呈现在我的 centerPanel...

Answer 1

您可以使用 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

Answer 2

我有一个类似的设置，一个“列表”，将各种小部件加载到内容窗格中。底部链接的代码有点复杂，因为它具有加载微调器的功能，在卸载时检查 isdirty 并执行大量要求/垃圾收集..

最简单的方案是让 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/?") 和 module = [?] 部分即可。
不过我有一种感觉，由于您使用的是“administrationMenu”名称，因此 unloadPane 之前的操作会很有趣。每个开关都将 1) 调用 AbstractController.isDirty 或 2) 实施自定义检查 - 然后仅在用户允许或没有未决更改时卸载。