Skip to content

T
todomvc
Commit e27e0f48 authored by Pascal Hartig's avatar Pascal Hartig
Browse files
Options

Dojo: Whitespace and README update 

Fixed one rendering bug and replaced spaces with tabs consistently.
parent 87d90ac8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 81 additions and 117 deletions
architecture-examples/dojo/index-dev.html deleted 100644 → 0
View file @ 87d90ac8
<!doctype html>
<!--
This is a Dojo version of TodoMVC using uncompressed Dojo source.
To use this, place todomvc directory at the directory containing dojo/dijit/dojox.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dojo • TodoMVC</title>
<link rel="stylesheet" href="../../assets/base.css">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css">
<!--[if IE]>
<script>
nativeDate = Date;
</script>
<script src="../../assets/ie.js"></script>
<script>
(function(nativeDate){
// It appears that the modification to Date constructor done by ie.js negatively affects new Date("X"), ending up a JS error.
// Using the native Date constructor for that case.
var origDate = Date;
Date = function(){
return (arguments.length == 1 && typeof arguments[0] == "string" ? nativeDate : origDate).apply(this, [].slice.call(arguments, 0));
};
Date.prototype = new origDate();
})(nativeDate);
</script>
<![endif]-->
</head>
<body>
<section id="todoapp" data-dojo-type="todo/app18"></section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://jamesthom.as/">James Thomas</a> and <a href="https://github.com/edchat">Ed Chatelain</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="../../assets/base.js"></script>
<script>
require = {
async: true,
parseOnLoad: true,
locale: "en",
paths: {
"todo": "../todomvc/architecture-examples/dojo/js/todo"
},
deps: ["dojo/parser", "dojo/domReady!"],
mvc: {debugBindings: true}
};
</script>
<script src="../../../dojo/dojo.js"></script>
</body>
</html>
architecture-examples/dojo/js/todo/app.html
View file @ e27e0f48
<section>
<header id="header">
<h1>todos</h1>
<input id="new-todo" data-dojo-attach-event="onkeypress:onKeyPress" placeholder="What needs to be done?" type="text" autofocus>
<span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
</header>
<input id="new-todo" data-dojo-attach-event="onkeypress:onKeyPress" placeholder="What needs to be done?" type="text" autofocus>
<span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
</header>
<section id="main">
<input id="toggle-all" data-dojo-attach-point="mark_all" data-dojo-attach-event="onclick:onMarkAll" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-dojo-attach-point="todo_list" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: this.model.todos, exprchar: '#'">
<li data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '#{this.index}'">
<div class="view">
<label class="dijitInline inline_edit" data-dojo-type="todo.form.InlineEditBox"
data-dojo-props='ref: "title", editor:"dijit.form.TextBox", autosave:true'></label>
<section id="main">
<input id="toggle-all" data-dojo-attach-point="mark_all" data-dojo-attach-event="onclick:onMarkAll" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-dojo-attach-point="todo_list" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: this.model.todos, exprchar: '#'">
<li data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '#{this.index}'">
<div class="view">
<label class="dijitInline inline_edit" data-dojo-type="todo.form.InlineEditBox"
data-dojo-props='ref: "title", editor:"dijit.form.TextBox", autosave:true'></label>
<input class="toggle" type="checkbox" data-dojo-type="todo.form.CheckBox" data-dojo-props='ref: "completed"'>
<button class="destroy" data-model-id="#{this.index}">
</button>
</div>
</li>
</ul>
<input class="toggle" type="checkbox" data-dojo-type="todo.form.CheckBox" data-dojo-props='ref: "completed"'>
<button class="destroy" data-model-id="#{this.index}">
</button>
</div>
</li>
</ul>
</section>
<footer id="footer" data-dojo-attach-point="todo_stats">
<span id="todo-count">
<strong>
<span data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: this.model.incomplete" class="number"></span>
</strong>
<span class="word">item<span class="plural">s</span></span> left
</span>
<!-- Remove this if you don't implement routing -->
<ul id="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-dojo-attach-event="onclick:removeCompletedItems">
Clear completed (
<span class="number-done" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: this.model.complete" ></span>
)
</button>
</footer>
<footer id="footer" data-dojo-attach-point="todo_stats">
<span id="todo-count">
<strong>
<span data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: this.model.incomplete" class="number"></span>
</strong>
<span class="word">item<span class="plural">s</span></span> left
</span>
<ul id="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-dojo-attach-event="onclick:removeCompletedItems">
Clear completed (<span class="number-done" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: this.model.complete"></span>)
</button>
</footer>
</section>
architecture-examples/dojo/js/todo/app18.html
View file @ e27e0f48
......@@ -23,7 +23,7 @@
<input id="toggle-all" type="checkbox"
data-dojo-type="dijit/form/CheckBox"
data-dojo-props="checked: at(${id}_ctrl, 'incomplete').transform(LessThanOrEqualToConverter),
onClick: function(e){ ${id}_listCtrl.markAll(e.target.checked); }">
onClick: function(e){ ${id}_listCtrl.markAll(e.target.checked); }">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"
data-dojo-type="todo/TodoList"
......@@ -56,37 +56,36 @@
<span class="word">item<!--
--><span data-dojo-type="todo/CssToggleWidget"
data-dojo-props="_setSingleAttr: {type: 'classExists', className: 'plural'},
constraints: {lessThanOrEqualTo: 1},
single: at(${id}_ctrl, 'incomplete').transform(LessThanOrEqualToConverter)">s</span></span>
constraints: {lessThanOrEqualTo: 1},
single: at(${id}_ctrl, 'incomplete').transform(LessThanOrEqualToConverter)">s</span></span>
left
</span>
<!-- Remove this if you don't implement routing -->
<ul id="filters">
<li>
<a href="#/"
data-dojo-type="todo/CssToggleWidget"
data-dojo-props="_setSelectedAttr: {type: 'classExists', className: 'selected'},
selected: at(${id}_routeCtl, 'hash').transform(HashSelectedConverter)">All</a>
selected: at(${id}_routeCtl, 'hash').transform(HashSelectedConverter)">All</a>
</li>
<li>
<a href="#/active"
data-dojo-type="todo/CssToggleWidget"
data-dojo-props="_setSelectedAttr: {type: 'classExists', className: 'selected'},
selected: at(${id}_routeCtl, 'hash').transform(HashSelectedConverter)">Active</a>
selected: at(${id}_routeCtl, 'hash').transform(HashSelectedConverter)">Active</a>
</li>
<li>
<a href="#/completed"
data-dojo-type="todo/CssToggleWidget"
data-dojo-props="_setSelectedAttr: {type: 'classExists', className: 'selected'},
selected: at(${id}_routeCtl, 'hash').transform(HashSelectedConverter)">Completed</a>
selected: at(${id}_routeCtl, 'hash').transform(HashSelectedConverter)">Completed</a>
</li>
</ul>
<button id="clear-completed" onclick="${id}_listCtrl.removeCompletedItems();">
Clear completed (
<span class="number-done"
Clear completed (<!--
--><span class="number-done"
data-dojo-type="dijit/_WidgetBase"
data-dojo-props="_setValueAttr: {type: 'innerText', node: 'domNode'}, value: at(${id}_ctrl, 'complete')"></span>
)
</button>
data-dojo-props="_setValueAttr: {type: 'innerText', node:
'domNode'}, value: at(${id}_ctrl, 'complete')"></span><!--
-->)</button>
</footer>
</section>
architecture-examples/dojo/profiles/todomvc.profile.js
View file @ e27e0f48
// This is a build profile for Dojo version of TodoMVC.
// To use this, place todomvc directory at the directory containing dojo/dijit/dojox/util (and follow the procedure of building Dojo).
// Refer to todomvc/architecture-examples/dojo/js/lib/dojo-1.8 and todomvc/architecture-examples/dojo/js/lib/dijit-1.8 to see what built files need to be copied.
dependencies = {
stripConsole: "normal",
......
architecture-examples/dojo/readme.md
View file @ e27e0f48
# Dojo TodoMVC app
## Notes
## Building
Developers often ask what the difference is between Dojo 1.7+ and Require.js, which also supports the use of [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) modules.
To build the Dojo app, you first need to download and extract the [Dojo SDK](https://dojotoolkit.org/download/#sdk).
At the root folder of the extracted SDK, copy or symlink the complete `todomvc`
folder, so your directory structure looks like this:
Require.js is a loader which implements AMD and may be used with various toolkits.There are some other AMD implementations like curl.js.
dojo-release/
├── dijit
├── dojo
├── dojox
├── todomvc
└── util
Dojo is a toolkit which has been converted to use AMD and ships with an implementation of an AMD loader and optimization tools. As such, you do not need to use Require.js in order to write AMD modules using Dojo.
Enter the `dojo-release/util` folder and run these commands to build the
`dojo.js` file including all required resources and copy it back into the
todomvc folder. You need either java or node on your system to run these:
buildscripts/build.sh --profile ../todomvc/architecture-examples/dojo/profiles/todomvc.profile.js -r
cp ../release/dojo/dojo/dojo.js ../todomvc/architecture-examples/dojo/js/lib/dojo-1.8/dojo.js
After a new release of Dojo, you may need to copy more files for this to work.
Check out the `js/lib/` folder for other files that are required from the
build.
You can now open the app in your browser.
## AMD Notes
Developers often ask what the difference is between Dojo 1.7+ and Require.js, which also supports the use of [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) modules.
Require.js is a loader which implements AMD and may be used with various toolkits. There are some other AMD implementations like curl.js.
Dojo is a toolkit which has been converted to use AMD and ships with an implementation of an AMD loader and optimization tools. As such, you do not need to use Require.js in order to write AMD modules using Dojo.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7