基本上,它是这样的。我有一个使用 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 并从我的自定义代码(例如新的 SettingsPage )创建一个实例并将其呈现在我的 centerPanel 上......
最佳答案
我有一个类似的设置,一个“列表”,将各种小部件加载到内容 Pane 中。链接在底部的代码有点复杂,因为它具有加载微调器的功能,在卸载时检查 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>
items 你会得到一些选项,比如用你所有的图标创建 sprite-sheet,然后用 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) 实现自定义检查 - 然后仅在用户允许或没有待处理的更改时卸载。
关于javascript - Dojo中的动态内容单页应用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11420807/