布局实施道场MVC [英] Layout implementation for Dojo MVC
问题描述
我通过使用从一开始就很好的做法试图从头开始道场项目。我真的很新Dojo工具包，所以我通过大量的文档和样本的这离开我了很多很酷的东西，但对如何实施未来开发的体系结构（或插件）没办法走路。我已经在网上搜索，发现这个道场的样板项目，这似乎是一个良好的开端把他们放在一起，但我想要更多的东西，我想在我的应用程序中实现MVC模式（我有很多的经验，Java和Ruby on Rails的DEV）并在此的非常酷的例子的。所以，我创建了这样的事情，似乎一个pretty合法的方式来组织我的项目。纠正我，如果我错了..或者你有更好的办法。
I started a dojo project from scratch by trying using good practice from the very beginning. I'm really new to dojo toolkit, so I'm walking through lots of documentations and samples which leave me with a lots of cool stuff but no way on how to implement an architecture for future dev (or add-ons). I have searched the web and found this dojo boilerplate project which seems to be a good start for putting it all together, but I wanted something more, I wanted to implement the MVC pattern (I have lots of experience with JAVA and Ruby on rails dev) in my application and came across this very cool example. So, I created something like this which seems a pretty legit way to organize my project. Correct me, if I'm wrong.. or you have a better approach.
现在，我已经准备好开始。我曾尝试一对夫妇Dojo工具包网站上的教程。运行奇妙，当你只有一个页面。但现在，我不知道我将如何实现这个布局教程到我自己的应用程序。我想这种布局是我为我的应用程序主要布局（所以，我想有code的那件到我的index.html）
Now, I am ready to start. I have tried a couple of tutorials on dojo toolkit website. Run wonderfully when you only have one page. But right now, I was wondering how would I implement this layout tutorial into my own application. I want this kind of layout to be my main layout for my application (so, I tried to had those pieces of code into my 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>
，但它没有得到：
but it doesn't get:
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane", "dojo/parser"]);
所以结果基本上是div和我的文字，但没有任何布局。我缺少什么？
So the result is basically the div and my text, but no layout whatsoever. What am I missing?
我的解决办法：我想我的指数只创建一个div（如容器），并从加载程序（应用程序/ run.js），（这称之为称为主另一个脚本）喂他，这main.js文件采用AMD的（这我开始熟悉）的概念，他的处理我的应用程序的任何实例的创建。因此，例如，我能为我的布局和实例它在该文件中创建一个特定的视图...
My solution: I would create only a div on my index (e.g "container") and feed him from the loader (app/run.js), (which call another script called main), this main.js file is using the concept of AMD (which I'm beginning to be familiar), and he's handling the creation of any instance of my application. So, for example, I could create a specific view for my layout and instance it on that file...
推荐答案
我也用道场样板项目了解我的应用程序这是我的 main.js ：
I use also dojo boilerplate project for my applications and this is my 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.js 如下：
My EntryPoint module/class is a widget, i.e. EntryPoint.js looks like:
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>
[...]
使用的优点小部件作为您的主要布局：
- HTML模板出来的作品使用Dojo构建系统的方块
- 您可以使用
数据Dojo的附加点和数据道场 - 附加事件在布局模板 - 您可以使用
$ {i18n.title.members}在HTML字符串替换
- html template works out of the box with dojo build system
- you can use
data-dojo-attach-pointanddata-dojo-attach-eventin your layout template - you can use
${i18n.title.members}for string substitution in html
这篇关于布局实施道场MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
