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 @@
@import "./css/claro.css";
</style>
<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>
require(["dojo/parser", "todo/app"])
</script>
<script data-dojo-config="async:true, parseOnLoad:true, paths:{'todo':'../../todo'}, deps:['dojo/parser', 'todo/app']" src="./js/dtk/dojo/dojo.js"></script>
</head>
<body class="claro">
......@@ -28,7 +25,7 @@
<div id="credits">
Created by
<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>
</body>
......
todo-example/dojo/js/todo/app.html
View file @ 7c80642e
......@@ -9,8 +9,7 @@
<li data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '#{this.index}'">
<div class="todo">
<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>
<span class="todo-destroy" data-model-id="#{this.index}">
......@@ -27,7 +26,7 @@
</span>
<span class="todo-clear">
<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>
completed items
</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
*/
define(["dojo/_base/declare",
define(["dojo/_base/declare",
// Parent classes
"dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
"dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
// General application modules
"dojo/_base/lang", "dojo/_base/event", "dojo/on", "dojo/dom-class", "dojo/dom-attr", "dojox/mvc", "todo/model/TodoModel",
// Widget template
......@@ -15,7 +15,7 @@ define(["dojo/_base/declare",
return declare("todo.app", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: template,
constructor: function () {
/**
* Create new application Model class, this will be used to bind
......@@ -25,14 +25,14 @@ define(["dojo/_base/declare",
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
* 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.
*/
mvc.bindInputs([this.model.complete, this.model.incomplete], lang.hitch(this, "onItemStatusUpdate"));
/**
/**
* Hook into unload event to trigger persisting
* of the current model contents into the localStorage
* backed data store.
......@@ -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
* have the correct initial CSS classes given the starting model
* contents.
*/
*/
postCreate: function () {
on(this.domNode, ".todo-destroy:click", lang.hitch(this, "onRemove"));
this.onItemStatusUpdate();
......@@ -55,35 +55,35 @@ define(["dojo/_base/declare",
/**
* 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.
*/
removeCompletedItems: function () {
var len = this.model.todos.length, idx = 0;
/**
/**
* Removing array indices from a Dojo MVC Model
* array left-shifts the remaining items. When
* we find an item to remove, don't increment the
* array left-shifts the remaining items. When
* we find an item to remove, don't increment the
* index and, instead, decrement the total item count.
*/
while (idx < len) {
if (this.model.todos[idx].isDone.value) {
this.model.todos.remove(idx);
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.
*/
addToModel: function (content, isDone) {
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);
......@@ -92,17 +92,17 @@ define(["dojo/_base/declare",
/**
* Adjust CSS classes on todo-stats element based upon whether
* we a number of completed and incomplete todo items.
*/
*/
onItemStatusUpdate: function () {
domClass[this.model.complete.value > 0 ? "add" : "remove" ](this.todo_stats, "items_selected");
domClass[this.model.todos.get("length") ? "add" : "remove" ](this.todo_stats, "items_present");
domClass.toggle(this.todo_stats, "items_selected", this.model.complete.value > 0);
domClass.toggle(this.todo_stats, "items_present", this.model.todos.get("length"));
},
/**
* Handle key press events for the todo input
* field. If user has pressed enter, add current
* text value as new todo item in the model.
*/
*/
onKeyPress: function (event) {
if (event.keyCode !== 13) return;
......@@ -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
* model using the item identifier.
**/
**/
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
function(declare, StatefulModel, LocalStorage, mvc, lang, array) {
return declare([StatefulModel], {
/**
/**
* Default model structure, overriden by any
* items found in localStorage.
*/
*/
data: {
id: "local_storage_todos",
todos : [],
incomplete: 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
* when the application finishes.
*/
......@@ -24,7 +24,7 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag
/**
* Attempt to read todo items from localStorage,
* 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.
*/
var data = this.store.get(this.data.id) || this.data;
......@@ -35,18 +35,18 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag
},
setUpModelBinding: function () {
/**
* Set up a composite model attribute, "complete", that is automatically
* calculated whenever the "incomplete" source value is modified. The "complete"
/**
* Set up a composite model attribute, "complete", that is automatically
* calculated whenever the "incomplete" source value is modified. The "complete"
* 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) {
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.
*/
array.forEach(this.todos, lang.hitch(this, "bindIsDone"));
......@@ -60,10 +60,10 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag
this.todos.watch(lang.hitch(this, "onTodosModelChange"));
},
/**
/**
* Set up binding on a todo item, so that when the
* 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) {
mvc.bindInputs([item.isDone], lang.hitch(this, "updateTotalItemsLeft"));
......@@ -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
* 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.
*/
*/
onTodosModelChange: function (prop, oldValue, newValue) {
this.updateTotalItemsLeft();
......@@ -88,13 +88,9 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag
* cause the bound "complete" value to be updated as well.
*/
updateTotalItemsLeft: function () {
var remaining = 0;
array.forEach(this.todos, function (item) {
item && !item.isDone.value && remaining++;
});
this.incomplete.set("value", remaining);
this.incomplete.set("value", array.filter(this.todos, function (item) {
return item && !item.isDone.value;
}).length);
}
});
});
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
*/
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/
// property if a specific id is to be used.
// returns: Number
var id = options && options.id || object[this.idProperty] || Math.random();
localStorage.setItem(id,dojo.toJson(object));
localStorage.setItem(id, json.toJson(object));
return id;
},
add: function(object, options){
......@@ -112,7 +112,7 @@ define(["dojo/_base/declare", "dojo/_base/lang", "dojo/_base/json", "dojo/store/
var data=[];
for (var i=0; i<localStorage.length;i++){
data.push(this.get(localStorage.key(i)));
}
}
return QueryResults(this.queryEngine(query, options)(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