Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
T
todomvc
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Eugene Shen
todomvc
Commits
06c248c3
Commit
06c248c3
authored
Jan 14, 2012
by
James Thomas
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Finished up re-factoring to use application module
parent
2da31519
Changes
6
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
322 additions
and
264 deletions
+322
-264
todo-example/dojo/css/todos.css
todo-example/dojo/css/todos.css
+50
-52
todo-example/dojo/index.html
todo-example/dojo/index.html
+11
-211
todo-example/dojo/js/dtk/dojo/dojo.js
todo-example/dojo/js/dtk/dojo/dojo.js
+1
-1
todo-example/dojo/js/todo/app.html
todo-example/dojo/js/todo/app.html
+37
-0
todo-example/dojo/js/todo/app.js
todo-example/dojo/js/todo/app.js
+122
-0
todo-example/dojo/js/todo/model/TodoModel.js
todo-example/dojo/js/todo/model/TodoModel.js
+101
-0
No files found.
todo-example/dojo/css/todos.css
View file @
06c248c3
...
...
@@ -57,10 +57,10 @@ body {
line-height
:
1
;
}
#
create-todo
{
.
create-todo
{
position
:
relative
;
}
#
create-todo
input
{
.
create-todo
input
{
width
:
466px
;
font-size
:
24px
;
font-family
:
inherit
;
...
...
@@ -75,7 +75,7 @@ body {
box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
1px
2px
0
inset
;
}
#
create-todo
span
{
.
create-todo
span
{
position
:
absolute
;
z-index
:
999
;
width
:
170px
;
...
...
@@ -83,17 +83,17 @@ body {
margin-left
:
-85px
;
}
#
todo-list
{
.
todo-list
{
margin-top
:
10px
;
}
#
todo-list
li
{
.
todo-list
li
{
padding
:
12px
20px
11px
0
;
position
:
relative
;
font-size
:
24px
;
line-height
:
1.1em
;
border-bottom
:
1px
solid
#cccccc
;
}
#
todo-list
li
:after
{
.
todo-list
li
:after
{
content
:
"\0020"
;
display
:
block
;
height
:
0
;
...
...
@@ -101,18 +101,18 @@ body {
overflow
:
hidden
;
visibility
:
hidden
;
}
#
todo-list
li
.editing
{
.
todo-list
li
.editing
{
padding
:
0
;
border-bottom
:
0
;
}
#
todo-list
.editing
.display
,
#
todo-list
.edit
{
.
todo-list
.editing
.display
,
.
todo-list
.edit
{
display
:
none
;
}
#
todo-list
.editing
.edit
{
.
todo-list
.editing
.edit
{
display
:
block
;
}
#
todo-list
.editing
input
{
.
todo-list
.editing
input
{
width
:
444px
;
font-size
:
24px
;
font-family
:
inherit
;
...
...
@@ -127,17 +127,17 @@ body {
-o-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
1px
2px
0
inset
;
box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
1px
2px
0
inset
;
}
#
todo-list
.check
{
.
todo-list
.check
{
position
:
relative
;
top
:
11px
;
margin
:
0
10px
0
7px
;
float
:
left
;
}
#
todo-list
.done
.todo-content
{
.
todo-list
.done
.todo-content
{
text-decoration
:
line-through
;
color
:
#777777
;
}
#
todo-list
.todo-destroy
{
.
todo-list
.todo-destroy
{
position
:
absolute
;
right
:
5px
;
top
:
14px
;
...
...
@@ -147,25 +147,25 @@ body {
height
:
20px
;
background
:
url(destroy.png)
no-repeat
0
0
;
}
#
todo-list
li
:hover
.todo-destroy
{
.
todo-list
li
:hover
.todo-destroy
{
display
:
block
;
}
#
todo-list
.todo-destroy
:hover
{
.
todo-list
.todo-destroy
:hover
{
background-position
:
0
-20px
;
}
#
todo-stats
{
.
todo-stats
{
*
zoom
:
1
;
margin-top
:
10px
;
color
:
#777777
;
display
:
none
;
}
#
todo-stats
.items_present
{
.
todo-stats.items_present
{
display
:
block
;
}
#
todo-stats
:after
{
.
todo-stats
:after
{
content
:
"\0020"
;
display
:
block
;
height
:
0
;
...
...
@@ -173,31 +173,31 @@ body {
overflow
:
hidden
;
visibility
:
hidden
;
}
#
todo-stats
.todo-count
{
.
todo-stats
.todo-count
{
float
:
left
;
}
#
todo-stats
.todo-count
.number
{
.
todo-stats
.todo-count
.number
{
font-weight
:
bold
;
color
:
#333333
;
}
#
todo-stats
.todo-clear
{
.
todo-stats
.todo-clear
{
float
:
right
;
display
:
none
}
#
todo-stats
.items_selected
.todo-clear
{
.
todo-stats.items_selected
.todo-clear
{
display
:
inline
;
}
#
todo-stats
.todo-clear
a
{
.
todo-stats
.todo-clear
a
{
color
:
#777777
;
font-size
:
12px
;
}
#
todo-stats
.todo-clear
a
:visited
{
.
todo-stats
.todo-clear
a
:visited
{
color
:
#777777
;
}
#
todo-stats
.todo-clear
a
:hover
{
.
todo-stats
.todo-clear
a
:hover
{
color
:
#336699
;
}
...
...
@@ -352,11 +352,11 @@ body {
/* line 32 */
#todoapp
.content
#
create-todo
{
#todoapp
.content
.
create-todo
{
position
:
relative
;
}
/* line 34 */
#todoapp
.content
#
create-todo
input
{
#todoapp
.content
.
create-todo
input
{
font-size
:
24px
;
font-family
:
inherit
;
line-height
:
1.4em
;
...
...
@@ -371,7 +371,7 @@ body {
}
/* line 47 */
#todoapp
.content
#
create-todo
span
{
#todoapp
.content
.
create-todo
span
{
position
:
absolute
;
z-index
:
999
;
width
:
170px
;
...
...
@@ -380,11 +380,11 @@ body {
opacity
:
0
;
}
/* line 55 */
#todoapp
.content
ul
#
todo-list
{
#todoapp
.content
ul
.
todo-list
{
margin-top
:
10px
;
}
/* line 57 */
#todoapp
.content
ul
#
todo-list
li
{
#todoapp
.content
ul
.
todo-list
li
{
padding
:
15px
20px
15px
0
;
position
:
relative
;
font-size
:
24px
;
...
...
@@ -393,7 +393,7 @@ body {
cursor
:
move
;
}
/* line 22, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
#todoapp
.content
ul
#
todo-list
li
:after
{
#todoapp
.content
ul
.
todo-list
li
:after
{
content
:
"\0020"
;
display
:
block
;
height
:
0
;
...
...
@@ -402,12 +402,12 @@ body {
visibility
:
hidden
;
}
/* line 64 */
#todoapp
.content
ul
#
todo-list
li
.editing
{
#todoapp
.content
ul
.
todo-list
li
.editing
{
padding
:
0
;
border-bottom
:
0
;
}
/* line 67 */
#todoapp
.content
ul
#
todo-list
li
.editing
.todo-input
{
#todoapp
.content
ul
.
todo-list
li
.editing
.todo-input
{
display
:
block
;
width
:
466px
;
font-size
:
24px
;
...
...
@@ -423,35 +423,35 @@ body {
box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
1px
2px
0
inset
;
}
/* line 79 */
#todoapp
.content
ul
#
todo-list
li
.editing
.todo-content
{
#todoapp
.content
ul
.
todo-list
li
.editing
.todo-content
{
display
:
none
;
}
/* line 81 */
#todoapp
.content
ul
#
todo-list
li
.editing
.todo-check
{
#todoapp
.content
ul
.
todo-list
li
.editing
.todo-check
{
display
:
none
;
}
/* line 83 */
#todoapp
.content
ul
#
todo-list
li
.editing
.todo-destroy
{
#todoapp
.content
ul
.
todo-list
li
.editing
.todo-destroy
{
display
:
none
!important
;
}
/* line 85 */
#todoapp
.content
ul
#
todo-list
li
.todo-input
{
#todoapp
.content
ul
.
todo-list
li
.todo-input
{
display
:
none
;
}
/* line 87 */
#todoapp
.content
ul
#
todo-list
li
.todo-check
{
#todoapp
.content
ul
.
todo-list
li
.todo-check
{
position
:
relative
;
top
:
6px
;
margin
:
0
10px
0
7px
;
float
:
left
;
}
/* line 93 */
#todoapp
.content
ul
#
todo-list
li
.done
.todo-content
{
#todoapp
.content
ul
.
todo-list
li
.done
.todo-content
{
text-decoration
:
line-through
;
color
:
#777777
;
}
/* line 96 */
#todoapp
.content
ul
#
todo-list
li
.todo-destroy
{
#todoapp
.content
ul
.
todo-list
li
.todo-destroy
{
position
:
absolute
;
right
:
0px
;
top
:
22px
;
...
...
@@ -461,11 +461,11 @@ body {
height
:
20px
;
}
/* line 106 */
#todoapp
.content
ul
#
todo-list
li
:hover
.todo-destroy
{
#todoapp
.content
ul
.
todo-list
li
:hover
.todo-destroy
{
display
:
block
;
}
/* line 109 */
#todoapp
#
todo-stats
{
#todoapp
.
todo-stats
{
*
zoom
:
1
;
margin-top
:
10px
;
color
:
#555555
;
...
...
@@ -487,7 +487,7 @@ body {
line-height
:
36px
;
}
/* line 22, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
#todoapp
#
todo-stats
:after
{
#todoapp
.
todo-stats
:after
{
content
:
"\0020"
;
display
:
block
;
height
:
0
;
...
...
@@ -496,20 +496,20 @@ body {
visibility
:
hidden
;
}
/* line 118 */
#todoapp
#
todo-stats
.todo-count
{
#todoapp
.
todo-stats
.todo-count
{
float
:
left
;
}
/* line 120 */
#todoapp
#
todo-stats
.todo-count
.number
{
#todoapp
.
todo-stats
.todo-count
.number
{
font-weight
:
bold
;
color
:
#555555
;
}
/* line 123 */
#todoapp
#
todo-stats
.todo-clear
{
#todoapp
.
todo-stats
.todo-clear
{
float
:
right
;
}
/* line 125 */
#todoapp
#
todo-stats
.todo-clear
a
{
#todoapp
.
todo-stats
.todo-clear
a
{
display
:
block
;
line-height
:
20px
;
text-decoration
:
none
;
...
...
@@ -530,7 +530,7 @@ body {
box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
-1px
0
0
;
}
/* line 136 */
#todoapp
#
todo-stats
.todo-clear
a
:hover
{
#todoapp
.
todo-stats
.todo-clear
a
:hover
{
background
:
rgba
(
0
,
0
,
0
,
0.15
);
-moz-box-shadow
:
rgba
(
0
,
0
,
0
,
0.3
)
0
-1px
0
0
;
-webkit-box-shadow
:
rgba
(
0
,
0
,
0
,
0.3
)
0
-1px
0
0
;
...
...
@@ -538,7 +538,7 @@ body {
box-shadow
:
rgba
(
0
,
0
,
0
,
0.3
)
0
-1px
0
0
;
}
/* line 139 */
#todoapp
#
todo-stats
.todo-clear
a
:active
{
#todoapp
.
todo-stats
.todo-clear
a
:active
{
position
:
relative
;
top
:
1px
;
}
...
...
@@ -557,8 +557,6 @@ body {
.claro
.dijitCheckBox
,
.claro
.dijitCheckBoxIcon
{
background-image
:
none
;
width
:
14px
;
height
:
14px
;
}
.dijitCheckBoxInput
{
...
...
todo-example/dojo/index.html
View file @
06c248c3
...
...
@@ -7,171 +7,10 @@
@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 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':'/code/todomvc/todo-example/dojo/js/todo'}"
src=
"/code/DTK/dojotoolkit/dojo/dojo.js"
></script>
<script>
require
([
"
dojo/parser
"
,
"
dojo/dom-class
"
,
"
dojo/_base/array
"
,
"
dojox/mvc
"
,
"
todo/store/LocalStorage
"
,
"
dojox/mvc/Group
"
,
"
dojox/mvc/Repeat
"
,
"
dojox/mvc/Output
"
,
"
dijit/InlineEditBox
"
,
"
todo/form/CheckBox
"
],
function
(
parser
,
domClass
,
array
,
mvc
,
localStorage
)
{
/**
* 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.
*/
var
store
=
new
localStorage
();
/**
* 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
* localStorage key for this object.
*/
var
getLocalStorageItems
=
function
()
{
var
initial
=
{
id
:
"
local_storage_todos
"
,
todos
:
[],
incomplete
:
0
,
complete
:
0
};
return
store
.
get
(
initial
.
id
)
||
initial
;
};
/**
* Update the model's "incomplete" value with the
* total number of items not finished. This will automatically
* cause the bound "complete" value to be updated as well.
*/
var
updateTotalItemsLeft
=
function
()
{
var
remaining
=
0
;
array
.
forEach
(
model
.
todos
,
function
(
item
)
{
item
&&
!
item
.
isDone
.
value
&&
remaining
++
;
});
model
.
incomplete
.
set
(
"
value
"
,
remaining
);
};
/**
* Add new a new todo item as the last element
* in the parent model.
* Set up bindings to the checkbox value, changes
* should automatically update total items left.
*/
var
addToModel
=
function
(
content
,
isDone
)
{
var
insert
=
mvc
.
newStatefulModel
({
data
:
{
content
:
content
,
isDone
:
isDone
}
});
bindIsDone
(
insert
);
model
.
todos
.
add
(
model
.
todos
.
length
,
insert
);
}
/**
* 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".
*/
var
bindIsDone
=
function
(
item
)
{
mvc
.
bindInputs
([
item
.
isDone
],
updateTotalItemsLeft
);
}
/**
* Create new application Model class, this will be used to bind
* the UI elements to the data store items. Pre-populate model with
* items from localStorage if they exist...
*/
window
.
model
=
mvc
.
newStatefulModel
({
data
:
getLocalStorageItems
()
});
/**
* 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.
*/
mvc
.
bind
(
model
.
incomplete
,
"
value
"
,
model
.
complete
,
"
value
"
,
function
(
value
)
{
return
this
.
model
.
todos
.
get
(
"
length
"
)
-
value
;
});
/**
* The methods 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 values below are updated, the function will be executed.
*/
mvc
.
bindInputs
([
model
.
incomplete
],
function
()
{
domClass
[
model
.
todos
.
get
(
"
length
"
)
?
"
add
"
:
"
remove
"
](
"
todo-stats
"
,
"
items_present
"
);
});
mvc
.
bindInputs
([
model
.
complete
],
function
()
{
domClass
[
model
.
complete
.
value
>
0
?
"
add
"
:
"
remove
"
](
"
todo-stats
"
,
"
items_selected
"
);
});
/**
* Bind all pre-populated todo items to update the
* total item values when the "isDone" attribute is changed.
*/
array
.
forEach
(
model
.
todos
,
bindIsDone
);
/**
* Whenever the "todos" array is modified, an element is added
* or deleted, we need to recompute the model composite values.
* Binding attributes changes to the "updateTotalItemsLeft" function
* using "watch", an attribute on dojo.Stateful objects.
*/
model
.
todos
.
watch
(
updateTotalItemsLeft
);
/**
* Update the stats panel for the pre-populated
* items that may have been retrieved from localStorage
*/
updateTotalItemsLeft
();
/**
* Global event handlers, used to process user events
* (add item, remove item) generated by the views.
*/
window
.
addTodoItem
=
function
(
input
,
event
)
{
if
(
event
.
keyCode
!==
13
)
return
;
addToModel
(
input
.
value
,
false
);
input
.
value
=
""
;
};
/**
* Remove all items that have been completed from
* model. We have to individually check each todo
* item, removing if true.
*/
window
.
removeCompletedItems
=
function
()
{
var
len
=
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
* index and, instead, decrement the total item count.
*/
while
(
idx
<
len
)
{
if
(
model
.
todos
[
idx
].
isDone
.
value
)
{
model
.
todos
.
remove
(
idx
);
len
--
;
continue
;
}
idx
++
;
};
};
/**
* Hook into unload event to trigger persisting
* of the current model contents into the localStorage
* backed data store.
*/
window
.
onbeforeunload
=
function
()
{
model
.
commit
(
store
);
};
});
require
([
"
dojo/parser
"
,
"
todo/app
"
])
</script>
</head>
...
...
@@ -181,57 +20,18 @@
<div
id=
"todoapp"
>
<div
class=
"title"
>
<h1>
Todos
</h1>
</div>
<div
class=
"content"
>
<div
id=
"create-todo"
>
<input
id=
"new-todo"
placeholder=
"What needs to be done?"
type=
"text"
onkeypress=
"addTodoItem(this, event)"
/>
<span
class=
"ui-tooltip-top"
style=
"display:none;"
>
Press Enter to save this task
</span>
<div
class=
"title"
>
<h1>
Todos
</h1>
</div>
<div
id=
"todos"
>
<ul
id=
"todo-list"
data-dojo-type=
"dojox.mvc.Repeat"
data-dojo-props=
"ref: 'model.todos'"
>
<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"
data-dojo-props=
'ref: "content", editor:"dijit.form.TextBox", autosave:true, width:"420px", style:"width:420px;"'
></div>
<div
class=
"content"
data-dojo-type=
"todo.app"
></div>
<span
class=
"todo-destroy"
data-model-id=
"${this.index}"
onclick=
"model.todos.remove(this.dataset.modelId)"
>
</span>
</div>
</li>
</ul>
<div
id=
"credits"
>
Created by
<br
/>
<a
href=
"http://jamesthom.as/"
>
James Thomas
</a>
and
<a
href=
"https://github.com/edchat"
>
Ed Chatelain
</a>
.
</div>
<div
id=
"todo-stats"
>
<span
class=
"todo-count"
>
<span
data-dojo-type=
"dojox.mvc.Output"
data-dojo-props=
"ref: model.incomplete"
class=
"number"
></span>
<span
class=
"word"
>
items
</span>
left.
</span>
<span
class=
"todo-clear"
>
<a
href=
"#"
onclick=
"removeCompletedItems()"
>
Clear
<span
class=
"number-done"
data-dojo-type=
"dojox.mvc.Output"
data-dojo-props=
"ref: model.complete"
></span>
completed items
</a>
</span>
</div>
</div>
</div>
<div
id=
"credits"
>
Created by
<br
/>
<a
href=
"http://jamesthom.as/"
>
James Thomas
</a>
and
<a
href=
"https://github.com/edchat"
>
Ed Chatelain
</a>
.
</div>
</body>
</body>
</html>
todo-example/dojo/js/dtk/dojo/dojo.js
View file @
06c248c3
This diff is collapsed.
Click to expand it.
todo-example/dojo/js/todo/app.html
0 → 100644
View file @
06c248c3
<div>
<div
class=
"create-todo"
>
<input
class=
"new-todo"
data-dojo-attach-event=
"onkeypress:onKeyPress"
placeholder=
"What needs to be done?"
type=
"text"
/>
<span
class=
"ui-tooltip-top"
style=
"display:none;"
>
Press Enter to save this task
</span>
</div>
<div
class=
"todos"
>
<ul
class=
"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=
"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"
data-dojo-props=
'ref: "content", editor:"dijit.form.TextBox", autosave:true, width:"420px", style:"width:420px;"'
></div>
<span
class=
"todo-destroy"
data-model-id=
"#{this.index}"
>
</span>
</div>
</li>
</ul>
</div>
<div
class=
"todo-stats"
data-dojo-attach-point=
"todo_stats"
>
<span
class=
"todo-count"
>
<span
data-dojo-type=
"dojox.mvc.Output"
data-dojo-props=
"ref: this.model.incomplete"
class=
"number"
></span>
<span
class=
"word"
>
items
</span>
left.
</span>
<span
class=
"todo-clear"
>
<a
href=
"#"
data-dojo-attach-event=
"onclick:removeCompletedItems"
>
Clear
<span
class=
"number-done"
data-dojo-type=
"dojox.mvc.Output"
data-dojo-props=
"ref: this.model.complete"
></span>
completed items
</a>
</span>
</div>
</div>
todo-example/dojo/js/todo/app.js
0 → 100644
View file @
06c248c3
/**
* Original source from https://gist.github.com/880822
* Converted to AMD-baseless format
*/
define
([
"
dojo/_base/declare
"
,
// Parent classes
"
dijit/_WidgetBase
"
,
"
dijit/_TemplatedMixin
"
,
"
dijit/_WidgetsInTemplateMixin
"
,
// General application modules
"
dojo/_base/lang
"
,
"
dojo/on
"
,
"
dojo/dom-class
"
,
"
dojox/mvc
"
,
"
todo/model/TodoModel
"
,
// Widget template
"
dojo/text!./app.html
"
,
// Template Widgets
"
dijit/InlineEditBox
"
,
"
todo/form/CheckBox
"
,
"
dojox/mvc/Group
"
,
"
dojox/mvc/Repeat
"
,
"
dojox/mvc/Output
"
],
function
(
declare
,
_WidgetBase
,
_TemplatedMixin
,
_WidgetsInTemplateMixin
,
lang
,
on
,
domClass
,
mvc
,
TodoModel
,
template
)
{
return
declare
(
"
todo.app
"
,
[
_WidgetBase
,
_TemplatedMixin
,
_WidgetsInTemplateMixin
],
{
templateString
:
template
,
constructor
:
function
()
{
/**
* Create new application Model class, this will be used to bind
* the UI elements to the data store items. Pre-populate model with
* items from localStorage if they exist...
*/
this
.
model
=
new
TodoModel
();
/**
* 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 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.
*/
window
.
onbeforeunload
=
lang
.
hitch
(
this
,
function
()
{
this
.
model
.
commit
();
});
},
/**
* 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
();
},
/**
* Remove all items that have been completed from
* 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
* 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
;
}
idx
++
;
}
},
/**
* Add new a new todo item as the last element
* in the parent model.
*/
addToModel
:
function
(
content
,
isDone
)
{
var
insert
=
mvc
.
newStatefulModel
({
data
:
{
content
:
content
,
isDone
:
isDone
}
});
this
.
model
.
todos
.
add
(
this
.
model
.
todos
.
length
,
insert
);
},
/**
* 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
"
);
},
/**
* 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
;
this
.
addToModel
(
event
.
target
.
value
,
false
);
event
.
target
.
value
=
""
;
},
/**
* 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
(
event
.
target
.
dataset
.
modelId
);
}
});
});
todo-example/dojo/js/todo/model/TodoModel.js
0 → 100644
View file @
06c248c3
define
([
"
dojo/_base/declare
"
,
"
dojox/mvc/StatefulModel
"
,
"
todo/store/LocalStorage
"
,
"
dojox/mvc
"
,
"
dojo/_base/lang
"
,
"
dojo/_base/array
"
],
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
* used to read the initial items, if available, and persist the current items
* when the application finishes.
*/
store
:
new
LocalStorage
(),
constructor
:
function
()
{
/**
* 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
* localStorage key for this object.
*/
var
data
=
this
.
store
.
get
(
this
.
data
.
id
)
||
this
.
data
;
this
.
_createModel
(
data
);
this
.
setUpModelBinding
();
this
.
updateTotalItemsLeft
();
},
setUpModelBinding
:
function
()
{
/**
* 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.
*/
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
* total item values when the "isDone" attribute is changed.
*/
array
.
forEach
(
this
.
todos
,
lang
.
hitch
(
this
,
"
bindIsDone
"
));
/**
* Whenever the "todos" array is modified, an element is added
* or deleted, we need to recompute the model composite values.
* Binding attributes changes to the "onTodosModelChange" function
* using "watch", an attribute on dojo.Stateful objects.
*/
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".
*/
bindIsDone
:
function
(
item
)
{
mvc
.
bindInputs
([
item
.
isDone
],
lang
.
hitch
(
this
,
"
updateTotalItemsLeft
"
));
},
/**
* When todos array is modified, we need to update the composite
* value attributes. If the modification was an addition, ensure the
* "isDone" attribute is being watched for updates.
*/
onTodosModelChange
:
function
(
prop
,
oldValue
,
newValue
)
{
this
.
updateTotalItemsLeft
();
// Adding to an array indicated by prop being indices and no previous value existing
if
(
typeof
prop
===
"
number
"
&&
!
oldValue
&&
newValue
)
{
this
.
bindIsDone
(
newValue
);
}
},
/**
* Update the model's "incomplete" value with the
* total number of items not finished. This will automatically
* 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
);
}
});
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment