Skip to content

T
todomvc
Commit 7c80642e authored by James Thomas's avatar James Thomas
Browse files
Options

Merge pull request #3 from neonstalwart/tweaks 

minor tweaks to code
parents 973b3c70 c4c8e3ee
Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 61 deletions
todo-example/dojo/index.html
View file @ 7c80642e
...@@ -7,10 +7,7 @@ ...@@ -7,10 +7,7 @@
@import "./css/claro.css"; @import "./css/claro.css";
</style> </style>
<link href="css/todos.css" media="all" rel="stylesheet" type="text/css"/> <link href="css/todos.css" media="all" rel="stylesheet" type="text/css"/>
<script data-dojo-config="async:true, parseOnLoad:true, paths:{'todo':'../../todo'}" src="./js/dtk/dojo/dojo.js"></script> <script data-dojo-config="async:true, parseOnLoad:true, paths:{'todo':'../../todo'}, deps:['dojo/parser', 'todo/app']" src="./js/dtk/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "todo/app"])
</script>
</head> </head>
<body class="claro"> <body class="claro">
...@@ -28,7 +25,7 @@ ...@@ -28,7 +25,7 @@
<div id="credits"> <div id="credits">
Created by Created by
<br /> <br />
<a href="http://jamesthom.as/">James Thomas</a> and <a href="https://github.com/edchat">Ed Chatelain</a>. <a href="http://jamesthom.as/">James Thomas</a> and <a href="https://github.com/edchat">Ed Chatelain</a>.
</div> </div>
</div> </div>
</body> </body>
......
todo-example/dojo/js/todo/app.html
View file @ 7c80642e
...@@ -9,8 +9,7 @@ ...@@ -9,8 +9,7 @@
<li data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '#{this.index}'"> <li data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '#{this.index}'">
<div class="todo"> <div class="todo">
<input class="check" data-dojo-type="todo.form.CheckBox" data-dojo-props='ref: "isDone"' style="display:inline-block" > <input class="check" data-dojo-type="todo.form.CheckBox" data-dojo-props='ref: "isDone"' style="display:inline-block" >
</input> <div class="todo-content dijitInline" data-dojo-type="dijit.InlineEditBox"
<div class="todo-content dijitInline" data-dojo-type="dijit.InlineEditBox"
data-dojo-props='ref: "todo_text", editor:"dijit.form.TextBox", autosave:true, width:"420px", style:"width:420px;"'></div> data-dojo-props='ref: "todo_text", editor:"dijit.form.TextBox", autosave:true, width:"420px", style:"width:420px;"'></div>
<span class="todo-destroy" data-model-id="#{this.index}"> <span class="todo-destroy" data-model-id="#{this.index}">
...@@ -27,7 +26,7 @@ ...@@ -27,7 +26,7 @@
</span> </span>
<span class="todo-clear"> <span class="todo-clear">
<a href="#" data-dojo-attach-event="onclick:removeCompletedItems"> <a href="#" data-dojo-attach-event="onclick:removeCompletedItems">
Clear Clear
<span class="number-done" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: this.model.complete" ></span> <span class="number-done" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: this.model.complete" ></span>
completed items completed items
</a> </a>
......
todo-example/dojo/js/todo/app.js
View file @ 7c80642e
/** /**
* Original source from https://gist.github.com/880822 * Original source from https://gist.github.com/880822
* Converted to AMD-baseless format * Converted to AMD-baseless format
*/ */
define(["dojo/_base/declare", define(["dojo/_base/declare",
// Parent classes // Parent classes
"dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
// General application modules // General application modules
"dojo/_base/lang", "dojo/_base/event", "dojo/on", "dojo/dom-class", "dojo/dom-attr", "dojox/mvc", "todo/model/TodoModel", "dojo/_base/lang", "dojo/_base/event", "dojo/on", "dojo/dom-class", "dojo/dom-attr", "dojox/mvc", "todo/model/TodoModel",
// Widget template // Widget template
...@@ -15,7 +15,7 @@ define(["dojo/_base/declare", ...@@ -15,7 +15,7 @@ define(["dojo/_base/declare",
return declare("todo.app", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], { return declare("todo.app", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: template, templateString: template,
constructor: function () { constructor: function () {
/** /**
* Create new application Model class, this will be used to bind * Create new application Model class, this will be used to bind
...@@ -25,14 +25,14 @@ define(["dojo/_base/declare", ...@@ -25,14 +25,14 @@ define(["dojo/_base/declare",
this.model = new TodoModel(); this.model = new TodoModel();
/** /**
* The method below set up a function binding to the composite (complete & incomplete) * The method below set up a function binding to the composite (complete & incomplete)
* model attributes. These values are used to append CSS classes to dynamically show & hide * model attributes. These values are used to append CSS classes to dynamically show & hide
* the "stats" elements when the model is non-empty and has some completed items. Whenever * the "stats" elements when the model is non-empty and has some completed items. Whenever
* the values below are updated, the function will be executed. * the values below are updated, the function will be executed.
*/ */
mvc.bindInputs([this.model.complete, this.model.incomplete], lang.hitch(this, "onItemStatusUpdate")); mvc.bindInputs([this.model.complete, this.model.incomplete], lang.hitch(this, "onItemStatusUpdate"));
/** /**
* Hook into unload event to trigger persisting * Hook into unload event to trigger persisting
* of the current model contents into the localStorage * of the current model contents into the localStorage
* backed data store. * backed data store.
...@@ -43,11 +43,11 @@ define(["dojo/_base/declare", ...@@ -43,11 +43,11 @@ define(["dojo/_base/declare",
}, },
/** /**
* Listen for item remove events from the using event delegation, * Listen for item remove events from the using event delegation,
* we don't have to attach to each item. Also, ensure todo-stats * we don't have to attach to each item. Also, ensure todo-stats
* have the correct initial CSS classes given the starting model * have the correct initial CSS classes given the starting model
* contents. * contents.
*/ */
postCreate: function () { postCreate: function () {
on(this.domNode, ".todo-destroy:click", lang.hitch(this, "onRemove")); on(this.domNode, ".todo-destroy:click", lang.hitch(this, "onRemove"));
this.onItemStatusUpdate(); this.onItemStatusUpdate();
...@@ -55,35 +55,35 @@ define(["dojo/_base/declare", ...@@ -55,35 +55,35 @@ define(["dojo/_base/declare",
/** /**
* Remove all items that have been completed from * Remove all items that have been completed from
* model. We have to individually check each todo * model. We have to individually check each todo
* item, removing if true. * item, removing if true.
*/ */
removeCompletedItems: function () { removeCompletedItems: function () {
var len = this.model.todos.length, idx = 0; var len = this.model.todos.length, idx = 0;
/** /**
* Removing array indices from a Dojo MVC Model * Removing array indices from a Dojo MVC Model
* array left-shifts the remaining items. When * array left-shifts the remaining items. When
* we find an item to remove, don't increment the * we find an item to remove, don't increment the
* index and, instead, decrement the total item count. * index and, instead, decrement the total item count.
*/ */
while (idx < len) { while (idx < len) {
if (this.model.todos[idx].isDone.value) { if (this.model.todos[idx].isDone.value) {
this.model.todos.remove(idx); this.model.todos.remove(idx);
len--; len--;
continue; continue;
} }
idx++; idx++;
} }
}, },
/** /**
* Add new a new todo item as the last element * Add new a new todo item as the last element
* in the parent model. * in the parent model.
*/ */
addToModel: function (content, isDone) { addToModel: function (content, isDone) {
var insert = mvc.newStatefulModel({ var insert = mvc.newStatefulModel({
data: {todo_text: content, isDone: isDone} data: {todo_text: content, isDone: isDone}
}); });
this.model.todos.add(this.model.todos.length, insert); this.model.todos.add(this.model.todos.length, insert);
...@@ -92,17 +92,17 @@ define(["dojo/_base/declare", ...@@ -92,17 +92,17 @@ define(["dojo/_base/declare",
/** /**
* Adjust CSS classes on todo-stats element based upon whether * Adjust CSS classes on todo-stats element based upon whether
* we a number of completed and incomplete todo items. * we a number of completed and incomplete todo items.
*/ */
onItemStatusUpdate: function () { onItemStatusUpdate: function () {
domClass[this.model.complete.value > 0 ? "add" : "remove" ](this.todo_stats, "items_selected"); domClass.toggle(this.todo_stats, "items_selected", this.model.complete.value > 0);
domClass[this.model.todos.get("length") ? "add" : "remove" ](this.todo_stats, "items_present"); domClass.toggle(this.todo_stats, "items_present", this.model.todos.get("length"));
}, },
/** /**
* Handle key press events for the todo input * Handle key press events for the todo input
* field. If user has pressed enter, add current * field. If user has pressed enter, add current
* text value as new todo item in the model. * text value as new todo item in the model.
*/ */
onKeyPress: function (event) { onKeyPress: function (event) {
if (event.keyCode !== 13) return; if (event.keyCode !== 13) return;
...@@ -112,12 +112,12 @@ define(["dojo/_base/declare", ...@@ -112,12 +112,12 @@ define(["dojo/_base/declare",
}, },
/** /**
* Event handler when user has clicked to * Event handler when user has clicked to
* remove a todo item, just remove it from the * remove a todo item, just remove it from the
* model using the item identifier. * model using the item identifier.
**/ **/
onRemove: function (event) { onRemove: function (event) {
this.model.todos.remove(domAttr.get(event.target, "data-model-id")); this.model.todos.remove(domAttr.get(event.target, "data-model-id"));
} }
}); });
}); });
todo-example/dojo/js/todo/model/TodoModel.js
View file @ 7c80642e
...@@ -2,19 +2,19 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag ...@@ -2,19 +2,19 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag
function(declare, StatefulModel, LocalStorage, mvc, lang, array) { function(declare, StatefulModel, LocalStorage, mvc, lang, array) {
return declare([StatefulModel], { return declare([StatefulModel], {
/** /**
* Default model structure, overriden by any * Default model structure, overriden by any
* items found in localStorage. * items found in localStorage.
*/ */
data: { data: {
id: "local_storage_todos", id: "local_storage_todos",
todos : [], todos : [],
incomplete: 0, incomplete: 0,
complete: 0 complete: 0
}, },
/** /**
* Initialise our custom dojo store, backed by localStorage. This will be * Initialise our custom dojo store, backed by localStorage. This will be
* used to read the initial items, if available, and persist the current items * used to read the initial items, if available, and persist the current items
* when the application finishes. * when the application finishes.
*/ */
...@@ -24,7 +24,7 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag ...@@ -24,7 +24,7 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag
/** /**
* Attempt to read todo items from localStorage, * Attempt to read todo items from localStorage,
* returning default value the first time the application * returning default value the first time the application
* is loaded... The "id" parameter is used as the unique * is loaded... The "id" parameter is used as the unique
* localStorage key for this object. * localStorage key for this object.
*/ */
var data = this.store.get(this.data.id) || this.data; var data = this.store.get(this.data.id) || this.data;
...@@ -35,18 +35,18 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag ...@@ -35,18 +35,18 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag
}, },
setUpModelBinding: function () { setUpModelBinding: function () {
/** /**
* Set up a composite model attribute, "complete", that is automatically * Set up a composite model attribute, "complete", that is automatically
* calculated whenever the "incomplete" source value is modified. The "complete" * calculated whenever the "incomplete" source value is modified. The "complete"
* attribute is bound to a view widget, displaying the number of items that can * attribute is bound to a view widget, displaying the number of items that can
* be cleared using the link. * be cleared using the link.
*/ */
mvc.bind(this.incomplete, "value", this.complete, "value", lang.hitch(this, function (value) { mvc.bind(this.incomplete, "value", this.complete, "value", lang.hitch(this, function (value) {
return this.todos.get("length") - value; return this.todos.get("length") - value;
})); }));
/** /**
* Bind all pre-populated todo items to update the * Bind all pre-populated todo items to update the
* total item values when the "isDone" attribute is changed. * total item values when the "isDone" attribute is changed.
*/ */
array.forEach(this.todos, lang.hitch(this, "bindIsDone")); array.forEach(this.todos, lang.hitch(this, "bindIsDone"));
...@@ -60,10 +60,10 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag ...@@ -60,10 +60,10 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag
this.todos.watch(lang.hitch(this, "onTodosModelChange")); this.todos.watch(lang.hitch(this, "onTodosModelChange"));
}, },
/** /**
* Set up binding on a todo item, so that when the * Set up binding on a todo item, so that when the
* item's checked attribute changes, we re-calculate * item's checked attribute changes, we re-calculate
* the composite model attribute's value, "complete". * the composite model attribute's value, "complete".
*/ */
bindIsDone: function (item) { bindIsDone: function (item) {
mvc.bindInputs([item.isDone], lang.hitch(this, "updateTotalItemsLeft")); mvc.bindInputs([item.isDone], lang.hitch(this, "updateTotalItemsLeft"));
...@@ -71,9 +71,9 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag ...@@ -71,9 +71,9 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag
/** /**
* When todos array is modified, we need to update the composite * When todos array is modified, we need to update the composite
* value attributes. If the modification was an addition, ensure the * value attributes. If the modification was an addition, ensure the
* "isDone" attribute is being watched for updates. * "isDone" attribute is being watched for updates.
*/ */
onTodosModelChange: function (prop, oldValue, newValue) { onTodosModelChange: function (prop, oldValue, newValue) {
this.updateTotalItemsLeft(); this.updateTotalItemsLeft();
...@@ -88,13 +88,9 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag ...@@ -88,13 +88,9 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag
* cause the bound "complete" value to be updated as well. * cause the bound "complete" value to be updated as well.
*/ */
updateTotalItemsLeft: function () { updateTotalItemsLeft: function () {
var remaining = 0; this.incomplete.set("value", array.filter(this.todos, function (item) {
return item && !item.isDone.value;
array.forEach(this.todos, function (item) { }).length);
item && !item.isDone.value && remaining++;
});
this.incomplete.set("value", remaining);
} }
}); });
}); });
todo-example/dojo/js/todo/store/LocalStorage.js
View file @ 7c80642e
/** /**
* Original source from https://gist.github.com/880822 * Original source from https://gist.github.com/880822
* Converted to AMD-baseless format * Converted to AMD-baseless format
*/ */
define(["dojo/_base/declare", "dojo/_base/lang", "dojo/_base/json", "dojo/store/util/QueryResults", "dojo/store/util/SimpleQueryEngine"], define(["dojo/_base/declare", "dojo/_base/lang", "dojo/_base/json", "dojo/store/util/QueryResults", "dojo/store/util/SimpleQueryEngine"],
...@@ -53,7 +53,7 @@ define(["dojo/_base/declare", "dojo/_base/lang", "dojo/_base/json", "dojo/store/ ...@@ -53,7 +53,7 @@ define(["dojo/_base/declare", "dojo/_base/lang", "dojo/_base/json", "dojo/store/
// property if a specific id is to be used. // property if a specific id is to be used.
// returns: Number // returns: Number
var id = options && options.id || object[this.idProperty] || Math.random(); var id = options && options.id || object[this.idProperty] || Math.random();
localStorage.setItem(id,dojo.toJson(object)); localStorage.setItem(id, json.toJson(object));
return id; return id;
}, },
add: function(object, options){ add: function(object, options){
...@@ -112,7 +112,7 @@ define(["dojo/_base/declare", "dojo/_base/lang", "dojo/_base/json", "dojo/store/ ...@@ -112,7 +112,7 @@ define(["dojo/_base/declare", "dojo/_base/lang", "dojo/_base/json", "dojo/store/
var data=[]; var data=[];
for (var i=0; i<localStorage.length;i++){ for (var i=0; i<localStorage.length;i++){
data.push(this.get(localStorage.key(i))); data.push(this.get(localStorage.key(i)));
} }
return QueryResults(this.queryEngine(query, options)(data)); return QueryResults(this.queryEngine(query, options)(data));
}, },
setData: function(data){ setData: function(data){
......
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