todomvc/examples/dojo/js/todo/app18.html

> Helping you select an MV\* framework

<section>
	<script type="dojo/require">
		at: "dojox/mvc/at",
		SimpleTodoModel: "todo/model/SimpleTodoModel",
		HashSelectedConverter: "todo/misc/HashSelectedConverter",
		LessThanOrEqualToConverter: "todo/misc/LessThanOrEqualToConverter"
	</script>
	<span data-dojo-id="${id}_routeCtl" data-dojo-type="todo/ctrl/RouteController"></span>
	<span data-dojo-id="${id}_localStorage" data-dojo-type="todo/store/LocalStorage"></span>
	<span data-dojo-id="${id}_ctrl"
	 data-dojo-type="todo/ctrl/TodoRefController"
	 data-dojo-props="defaultId: 'todos-dojo', store: ${id}_localStorage, modelClass: SimpleTodoModel, complete: at('widget:${id}', 'complete')"></span>
	<span data-dojo-id="${id}_listCtrl"
	 data-dojo-type="todo/ctrl/TodoListRefController"
	 data-dojo-props="model: at(${id}_ctrl, 'todos'), length: at('widget:${id}', 'present').direction(at.to)"></span>
	<header id="header">
		<h1>todos</h1>
		<input id="new-todo" placeholder="What needs to be done?" type="text" autofocus
		 data-dojo-attach-event="onkeypress: onKeyPressNewItem">
		<span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
	</header>
	<section id="main">
		<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); }">
		<label for="toggle-all">Mark all as complete</label>
		<ul id="todo-list"
		 data-dojo-type="todo/TodoList"
		 data-dojo-props="children: at(${id}_listCtrl, 'model'), partialRebuild: true, listCtrl: ${id}_listCtrl"
		 data-mvc-child-props="uniqueId: at(this.target, 'uniqueId'), completed: at(this.target, 'completed'), hash: at(${id}_routeCtl, 'hash')">
			<script type="dojox/mvc/InlineTemplate">
				<li>
					<div class="view">
						<label class="dijitInline inline_edit"
						 data-dojo-attach-point="editBox"
						 data-dojo-attach-event="onChange: onEditBoxChange"
						 data-dojo-type="todo/form/InlineEditBox"
						 data-dojo-props="value: at('rel:', 'title'), editor: 'dijit/form/TextBox', autosave: true"></label>
						<input class="toggle" type="checkbox"
						 data-dojo-type="dijit/form/CheckBox"
						 data-dojo-props="checked: at('rel:', 'completed')">
						<button class="destroy" data-dojo-attach-event="onclick: onRemoveClick"></button>
					</div>
				</li>
			</script>
		</ul>
	</section>
	<footer id="footer">
		<span id="todo-count">
			<strong>
				<span class="number"
				 data-dojo-type="dijit/_WidgetBase"
				 data-dojo-props="_setValueAttr: {type: 'innerText', node: 'domNode'}, value: at(${id}_ctrl, 'incomplete')"></span>
			</strong>
			<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>
			left
		</span>
		<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>
			</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>
			</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>
			</li>
		</ul>
		<button id="clear-completed" onclick="${id}_listCtrl.removeCompletedItems();">
			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>
	</footer>
</section>