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
5d3afcf9
Commit
5d3afcf9
authored
Jul 01, 2012
by
addyosmani
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Finalizing application split up, cleaning up.
parent
4cab0659
Changes
8
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
338 additions
and
306 deletions
+338
-306
architecture-examples/backbone/index.html
architecture-examples/backbone/index.html
+17
-7
architecture-examples/backbone/js/app.js
architecture-examples/backbone/js/app.js
+3
-299
architecture-examples/backbone/js/collections/todos.js
architecture-examples/backbone/js/collections/todos.js
+43
-0
architecture-examples/backbone/js/init.js
architecture-examples/backbone/js/init.js
+2
-0
architecture-examples/backbone/js/models/todo.js
architecture-examples/backbone/js/models/todo.js
+36
-0
architecture-examples/backbone/js/routers/router.js
architecture-examples/backbone/js/routers/router.js
+27
-0
architecture-examples/backbone/js/views/appView.js
architecture-examples/backbone/js/views/appView.js
+130
-0
architecture-examples/backbone/js/views/todoView.js
architecture-examples/backbone/js/views/todoView.js
+80
-0
No files found.
architecture-examples/backbone/index.html
View file @
5d3afcf9
...
...
@@ -7,6 +7,7 @@
<link
rel=
"stylesheet"
href=
"../../assets/base.css"
/>
</head>
<body>
<section
id=
"todoapp"
>
<header
id=
"header"
>
<h1>
Todos
</h1>
...
...
@@ -24,13 +25,7 @@
<p>
Created by
<a
href=
"http://addyosmani.github.com/todomvc/"
>
Addy Osmani
</a></p>
<p>
Part of
<a
href=
"http://todomvc.com"
>
TodoMVC
</a></p>
</footer>
<script
src=
"js/libs/json2.js"
></script>
<script
src=
"../../assets/jquery.min.js"
></script>
<script
src=
"js/libs/underscore.js"
></script>
<script
src=
"js/libs/backbone.js"
></script>
<script
src=
"js/libs/backbone-localstorage.js"
></script>
<script
src=
"js/app.js"
></script>
<script
type=
"text/template"
id=
"item-template"
>
<
div
class
=
"
view
"
>
...
...
@@ -58,5 +53,20 @@
<
button
id
=
"
clear-completed
"
>
Clear
<%-
completed
%>
completed
<%=
completed
==
1
?
'
item
'
:
'
items
'
%><
/button
>
<%
}
%>
</script>
<script
src=
"js/libs/json2.js"
></script>
<script
src=
"../../assets/jquery.min.js"
></script>
<script
src=
"js/libs/underscore.js"
></script>
<script
src=
"js/libs/backbone.js"
></script>
<script
src=
"js/libs/backbone-localstorage.js"
></script>
<script
src=
"js/init.js"
></script>
<script
src=
"js/models/todo.js"
></script>
<script
src=
"js/collections/todos.js"
></script>
<script
src=
"js/views/todoView.js"
></script>
<script
src=
"js/views/appView.js"
></script>
<script
src=
"js/routers/router.js"
></script>
<script
src=
"js/app.js"
></script>
</body>
</html>
\ No newline at end of file
architecture-examples/backbone/js/app.js
View file @
5d3afcf9
// Load the application once the DOM is ready, using `jQuery.ready`:
$
(
function
(){
//
Todo Model
// ----------
//
Kick things off by creating the **App**.
var
App
=
new
window
.
app
.
AppView
;
// Our basic **Todo** model has `title`, `order`, and `completed` attributes.
var
Todo
=
Backbone
.
Model
.
extend
({
// Default attributes for the todo.
defaults
:
{
title
:
"
empty todo...
"
,
completed
:
false
},
// Ensure that each todo created has `title`.
initialize
:
function
()
{
if
(
!
this
.
get
(
"
title
"
))
{
this
.
set
({
"
title
"
:
this
.
defaults
.
title
});
}
},
// Toggle the `completed` state of this todo item.
toggle
:
function
()
{
this
.
save
({
completed
:
!
this
.
get
(
"
completed
"
)});
},
// Remove this Todo from *localStorage* and delete its view.
clear
:
function
()
{
this
.
destroy
();
}
});
// Todo Collection
// ---------------
// The collection of todos is backed by *localStorage* instead of a remote
// server.
var
TodoList
=
Backbone
.
Collection
.
extend
({
// Reference to this collection's model.
model
:
Todo
,
// Save all of the todo items under the `"todos"` namespace.
localStorage
:
new
Store
(
"
todos-backbone
"
),
// Filter down the list of all todo items that are finished.
completed
:
function
()
{
return
this
.
filter
(
function
(
todo
){
return
todo
.
get
(
'
completed
'
);
});
},
// Filter down the list to only todo items that are still not finished.
remaining
:
function
()
{
return
this
.
without
.
apply
(
this
,
this
.
completed
());
},
// We keep the Todos in sequential order, despite being saved by unordered
// GUID in the database. This generates the next order number for new items.
nextOrder
:
function
()
{
if
(
!
this
.
length
)
return
1
;
return
this
.
last
().
get
(
'
order
'
)
+
1
;
},
// Todos are sorted by their original insertion order.
comparator
:
function
(
todo
)
{
return
todo
.
get
(
'
order
'
);
}
});
// Create our global collection of **Todos**.
var
Todos
=
new
TodoList
;
// Todo Filter (active || completed || "")
var
TodoFilter
=
""
;
// Todo Item View
// --------------
// The DOM element for a todo item...
var
TodoView
=
Backbone
.
View
.
extend
({
//... is a list tag.
tagName
:
"
li
"
,
// Cache the template function for a single item.
template
:
_
.
template
(
$
(
'
#item-template
'
).
html
()),
// The DOM events specific to an item.
events
:
{
"
click .toggle
"
:
"
togglecompleted
"
,
"
dblclick .view
"
:
"
edit
"
,
"
click .destroy
"
:
"
clear
"
,
"
keypress .edit
"
:
"
updateOnEnter
"
,
"
blur .edit
"
:
"
close
"
},
// The TodoView listens for changes to its model, re-rendering. Since there's
// a one-to-one correspondence between a **Todo** and a **TodoView** in this
// app, we set a direct reference on the model for convenience.
initialize
:
function
()
{
this
.
model
.
on
(
'
change
'
,
this
.
render
,
this
);
this
.
model
.
on
(
'
destroy
'
,
this
.
remove
,
this
);
},
// Re-render the titles of the todo item.
render
:
function
()
{
var
$el
=
$
(
this
.
el
);
$el
.
html
(
this
.
template
(
this
.
model
.
toJSON
()));
$el
.
toggleClass
(
'
completed
'
,
this
.
model
.
get
(
'
completed
'
));
this
.
input
=
this
.
$
(
'
.edit
'
);
return
this
;
},
// Toggle the `"completed"` state of the model.
togglecompleted
:
function
()
{
this
.
model
.
toggle
();
},
// Switch this view into `"editing"` mode, displaying the input field.
edit
:
function
()
{
$
(
this
.
el
).
addClass
(
"
editing
"
);
this
.
input
.
focus
();
},
// Close the `"editing"` mode, saving changes to the todo.
close
:
function
()
{
var
value
=
this
.
input
.
val
().
trim
();
if
(
!
value
){
this
.
clear
();
}
this
.
model
.
save
({
title
:
value
});
$
(
this
.
el
).
removeClass
(
"
editing
"
);
},
// If you hit `enter`, we're through editing the item.
updateOnEnter
:
function
(
e
)
{
if
(
e
.
keyCode
==
13
)
this
.
close
();
},
// Remove the item, destroy the model.
clear
:
function
()
{
this
.
model
.
clear
();
}
});
// The Application
// ---------------
// Our overall **AppView** is the top-level piece of UI.
var
AppView
=
Backbone
.
View
.
extend
({
// Instead of generating a new element, bind to the existing skeleton of
// the App already present in the HTML.
el
:
$
(
"
#todoapp
"
),
// Our template for the line of statistics at the bottom of the app.
statsTemplate
:
_
.
template
(
$
(
'
#stats-template
'
).
html
()),
// Delegated events for creating new items, and clearing completed ones.
events
:
{
"
keypress #new-todo
"
:
"
createOnEnter
"
,
"
click #clear-completed
"
:
"
clearCompleted
"
,
"
click #toggle-all
"
:
"
toggleAllComplete
"
},
// At initialization we bind to the relevant events on the `Todos`
// collection, when items are added or changed. Kick things off by
// loading any preexisting todos that might be saved in *localStorage*.
initialize
:
function
()
{
this
.
input
=
this
.
$
(
"
#new-todo
"
);
this
.
allCheckbox
=
this
.
$
(
"
#toggle-all
"
)[
0
];
Todos
.
on
(
'
add
'
,
this
.
addOne
,
this
);
Todos
.
on
(
'
reset
'
,
this
.
addAll
,
this
);
Todos
.
on
(
'
all
'
,
this
.
render
,
this
);
this
.
$footer
=
$
(
'
#footer
'
);
this
.
$main
=
$
(
'
#main
'
);
Todos
.
fetch
();
},
// Re-rendering the App just means refreshing the statistics -- the rest
// of the app doesn't change.
render
:
function
()
{
var
completed
=
Todos
.
completed
().
length
;
var
remaining
=
Todos
.
remaining
().
length
;
if
(
Todos
.
length
)
{
this
.
$main
.
show
();
this
.
$footer
.
show
();
this
.
$footer
.
html
(
this
.
statsTemplate
({
completed
:
completed
,
remaining
:
remaining
}));
this
.
$
(
'
#filters li a
'
)
.
removeClass
(
'
selected
'
)
.
filter
(
"
[href='#/
"
+
TodoFilter
+
"
']
"
)
.
addClass
(
'
selected
'
);
}
else
{
this
.
$main
.
hide
();
this
.
$footer
.
hide
();
}
this
.
allCheckbox
.
checked
=
!
remaining
;
},
// Add a single todo item to the list by creating a view for it, and
// appending its element to the `<ul>`.
addOne
:
function
(
todo
)
{
var
view
=
new
TodoView
({
model
:
todo
});
this
.
$
(
"
#todo-list
"
).
append
(
view
.
render
().
el
);
},
// Add all items in the **Todos** collection at once.
addAll
:
function
()
{
this
.
$
(
"
#todo-list
"
).
html
(
''
);
switch
(
TodoFilter
){
case
"
active
"
:
_
.
each
(
Todos
.
remaining
(),
this
.
addOne
);
break
;
case
"
completed
"
:
_
.
each
(
Todos
.
completed
(),
this
.
addOne
);
break
;
default
:
Todos
.
each
(
this
.
addOne
,
this
);
break
;
}
},
// Generate the attributes for a new Todo item.
newAttributes
:
function
()
{
return
{
title
:
this
.
input
.
val
().
trim
(),
order
:
Todos
.
nextOrder
(),
completed
:
false
};
},
// If you hit return in the main input field, create new **Todo** model,
// persisting it to *localStorage*.
createOnEnter
:
function
(
e
)
{
if
(
e
.
keyCode
!=
13
)
return
;
if
(
!
this
.
input
.
val
().
trim
())
return
;
Todos
.
create
(
this
.
newAttributes
());
this
.
input
.
val
(
''
);
},
// Clear all completed todo items, destroying their models.
clearCompleted
:
function
()
{
_
.
each
(
Todos
.
completed
(),
function
(
todo
){
todo
.
clear
();
});
return
false
;
},
toggleAllComplete
:
function
()
{
var
completed
=
this
.
allCheckbox
.
checked
;
Todos
.
each
(
function
(
todo
)
{
todo
.
save
({
'
completed
'
:
completed
});
});
}
});
// Todo Router
// ----------
var
Router
=
Backbone
.
Router
.
extend
({
routes
:{
"
/:filter
"
:
"
setFilter
"
,
"
/:*
"
:
"
setFilter
"
},
setFilter
:
function
(
param
){
// Set the current filter to be used
TodoFilter
=
param
||
""
;
// Trigger a collection reset/addAll
Todos
.
trigger
(
'
reset
'
);
}
});
var
app_router
=
new
Router
;
Backbone
.
history
.
start
();
// Finally, we kick things off by creating the **App**.
var
App
=
new
AppView
;
});
});
\ No newline at end of file
architecture-examples/backbone/js/collections/todos.js
0 → 100644
View file @
5d3afcf9
(
function
()
{
'
use strict
'
;
// Todo Collection
// ---------------
// The collection of todos is backed by *localStorage* instead of a remote
// server.
var
TodoList
=
Backbone
.
Collection
.
extend
({
// Reference to this collection's model.
model
:
window
.
app
.
Todo
,
// Save all of the todo items under the `"todos"` namespace.
localStorage
:
new
Store
(
"
todos-backbone
"
),
// Filter down the list of all todo items that are finished.
completed
:
function
()
{
return
this
.
filter
(
function
(
todo
){
return
todo
.
get
(
'
completed
'
);
});
},
// Filter down the list to only todo items that are still not finished.
remaining
:
function
()
{
return
this
.
without
.
apply
(
this
,
this
.
completed
());
},
// We keep the Todos in sequential order, despite being saved by unordered
// GUID in the database. This generates the next order number for new items.
nextOrder
:
function
()
{
if
(
!
this
.
length
)
return
1
;
return
this
.
last
().
get
(
'
order
'
)
+
1
;
},
// Todos are sorted by their original insertion order.
comparator
:
function
(
todo
)
{
return
todo
.
get
(
'
order
'
);
}
});
// Create our global collection of **Todos**.
window
.
app
.
Todos
=
new
TodoList
;
})();
architecture-examples/backbone/js/init.js
0 → 100644
View file @
5d3afcf9
// Setup namespace for the app
window
.
app
=
window
.
app
||
{};
\ No newline at end of file
architecture-examples/backbone/js/models/todo.js
0 → 100644
View file @
5d3afcf9
(
function
()
{
'
use strict
'
;
// Todo Model
// ----------
// Our basic **Todo** model has `title`, `order`, and `completed` attributes.
window
.
app
.
Todo
=
Backbone
.
Model
.
extend
({
// Default attributes for the todo.
defaults
:
{
title
:
"
empty todo...
"
,
completed
:
false
},
// Ensure that each todo created has `title`.
initialize
:
function
()
{
if
(
!
this
.
get
(
"
title
"
))
{
this
.
set
({
"
title
"
:
this
.
defaults
.
title
});
}
},
// Toggle the `completed` state of this todo item.
toggle
:
function
()
{
this
.
save
({
completed
:
!
this
.
get
(
"
completed
"
)});
},
// Remove this Todo from *localStorage* and delete its view.
clear
:
function
()
{
this
.
destroy
();
}
});
})();
\ No newline at end of file
architecture-examples/backbone/js/routers/router.js
0 → 100644
View file @
5d3afcf9
(
function
()
{
'
use strict
'
;
// Todo Router
// ----------
var
Router
=
Backbone
.
Router
.
extend
({
routes
:{
"
/:filter
"
:
"
setFilter
"
,
"
/:*
"
:
"
setFilter
"
},
setFilter
:
function
(
param
){
// Set the current filter to be used
window
.
app
.
TodoFilter
=
param
||
""
;
// Trigger a collection reset/addAll
window
.
app
.
Todos
.
trigger
(
'
reset
'
);
}
});
window
.
app
.
TodoRouter
=
new
Router
;
Backbone
.
history
.
start
();
})();
\ No newline at end of file
architecture-examples/backbone/js/views/appView.js
0 → 100644
View file @
5d3afcf9
$
(
function
(
$
)
{
'
use strict
'
;
// The Application
// ---------------
// Our overall **AppView** is the top-level piece of UI.
window
.
app
.
AppView
=
Backbone
.
View
.
extend
({
// Instead of generating a new element, bind to the existing skeleton of
// the App already present in the HTML.
el
:
$
(
"
#todoapp
"
),
// Our template for the line of statistics at the bottom of the app.
statsTemplate
:
_
.
template
(
$
(
'
#stats-template
'
).
html
()),
// Delegated events for creating new items, and clearing completed ones.
events
:
{
"
keypress #new-todo
"
:
"
createOnEnter
"
,
"
click #clear-completed
"
:
"
clearCompleted
"
,
"
click #toggle-all
"
:
"
toggleAllComplete
"
},
// At initialization we bind to the relevant events on the `Todos`
// collection, when items are added or changed. Kick things off by
// loading any preexisting todos that might be saved in *localStorage*.
initialize
:
function
()
{
this
.
input
=
this
.
$
(
"
#new-todo
"
);
this
.
allCheckbox
=
this
.
$
(
"
#toggle-all
"
)[
0
];
window
.
app
.
Todos
.
on
(
'
add
'
,
this
.
addOne
,
this
);
window
.
app
.
Todos
.
on
(
'
reset
'
,
this
.
addAll
,
this
);
window
.
app
.
Todos
.
on
(
'
all
'
,
this
.
render
,
this
);
this
.
$footer
=
$
(
'
#footer
'
);
this
.
$main
=
$
(
'
#main
'
);
window
.
app
.
Todos
.
fetch
();
},
// Re-rendering the App just means refreshing the statistics -- the rest
// of the app doesn't change.
render
:
function
()
{
var
completed
=
window
.
app
.
Todos
.
completed
().
length
;
var
remaining
=
window
.
app
.
Todos
.
remaining
().
length
;
if
(
window
.
app
.
Todos
.
length
)
{
this
.
$main
.
show
();
this
.
$footer
.
show
();
this
.
$footer
.
html
(
this
.
statsTemplate
({
completed
:
completed
,
remaining
:
remaining
}));
this
.
$
(
'
#filters li a
'
)
.
removeClass
(
'
selected
'
)
.
filter
(
"
[href='#/
"
+
window
.
app
.
TodoFilter
+
"
']
"
)
.
addClass
(
'
selected
'
);
}
else
{
this
.
$main
.
hide
();
this
.
$footer
.
hide
();
}
this
.
allCheckbox
.
checked
=
!
remaining
;
},
// Add a single todo item to the list by creating a view for it, and
// appending its element to the `<ul>`.
addOne
:
function
(
todo
)
{
var
view
=
new
window
.
app
.
TodoView
({
model
:
todo
});
$
(
"
#todo-list
"
).
append
(
view
.
render
().
el
);
},
// Add all items in the **Todos** collection at once.
addAll
:
function
()
{
this
.
$
(
"
#todo-list
"
).
html
(
''
);
switch
(
window
.
app
.
TodoFilter
){
case
"
active
"
:
_
.
each
(
window
.
app
.
Todos
.
remaining
(),
this
.
addOne
);
break
;
case
"
completed
"
:
_
.
each
(
window
.
app
.
Todos
.
completed
(),
this
.
addOne
);
break
;
default
:
window
.
app
.
Todos
.
each
(
this
.
addOne
,
this
);
break
;
}
},
// Generate the attributes for a new Todo item.
newAttributes
:
function
()
{
return
{
title
:
this
.
input
.
val
().
trim
(),
order
:
window
.
app
.
Todos
.
nextOrder
(),
completed
:
false
};
},
// If you hit return in the main input field, create new **Todo** model,
// persisting it to *localStorage*.
createOnEnter
:
function
(
e
)
{
if
(
e
.
keyCode
!=
13
)
return
;
if
(
!
this
.
input
.
val
().
trim
())
return
;
window
.
app
.
Todos
.
create
(
this
.
newAttributes
());
this
.
input
.
val
(
''
);
},
// Clear all completed todo items, destroying their models.
clearCompleted
:
function
()
{
_
.
each
(
window
.
app
.
Todos
.
completed
(),
function
(
todo
){
todo
.
clear
();
});
return
false
;
},
toggleAllComplete
:
function
()
{
var
completed
=
this
.
allCheckbox
.
checked
;
window
.
app
.
Todos
.
each
(
function
(
todo
)
{
todo
.
save
({
'
completed
'
:
completed
});
});
}
});
});
\ No newline at end of file
architecture-examples/backbone/js/views/todoView.js
0 → 100644
View file @
5d3afcf9
$
(
function
()
{
'
use strict
'
;
// Todo Filter (active || completed || "")
window
.
app
.
TodoFilter
=
""
;
// Todo Item View
// --------------
// The DOM element for a todo item...
window
.
app
.
TodoView
=
Backbone
.
View
.
extend
({
//... is a list tag.
tagName
:
"
li
"
,
// Cache the template function for a single item.
template
:
_
.
template
(
$
(
'
#item-template
'
).
html
()),
// The DOM events specific to an item.
events
:
{
"
click .toggle
"
:
"
togglecompleted
"
,
"
dblclick .view
"
:
"
edit
"
,
"
click .destroy
"
:
"
clear
"
,
"
keypress .edit
"
:
"
updateOnEnter
"
,
"
blur .edit
"
:
"
close
"
},
// The TodoView listens for changes to its model, re-rendering. Since there's
// a one-to-one correspondence between a **Todo** and a **TodoView** in this
// app, we set a direct reference on the model for convenience.
initialize
:
function
()
{
this
.
model
.
on
(
'
change
'
,
this
.
render
,
this
);
this
.
model
.
on
(
'
destroy
'
,
this
.
remove
,
this
);
},
// Re-render the titles of the todo item.
render
:
function
()
{
var
$el
=
$
(
this
.
el
);
$el
.
html
(
this
.
template
(
this
.
model
.
toJSON
()));
$el
.
toggleClass
(
'
completed
'
,
this
.
model
.
get
(
'
completed
'
));
this
.
input
=
this
.
$
(
'
.edit
'
);
return
this
;
},
// Toggle the `"completed"` state of the model.
togglecompleted
:
function
()
{
this
.
model
.
toggle
();
},
// Switch this view into `"editing"` mode, displaying the input field.
edit
:
function
()
{
$
(
this
.
el
).
addClass
(
"
editing
"
);
this
.
input
.
focus
();
},
// Close the `"editing"` mode, saving changes to the todo.
close
:
function
()
{
var
value
=
this
.
input
.
val
().
trim
();
if
(
!
value
){
this
.
clear
();
}
this
.
model
.
save
({
title
:
value
});
$
(
this
.
el
).
removeClass
(
"
editing
"
);
},
// If you hit `enter`, we're through editing the item.
updateOnEnter
:
function
(
e
)
{
if
(
e
.
keyCode
==
13
)
this
.
close
();
},
// Remove the item, destroy the model.
clear
:
function
()
{
this
.
model
.
clear
();
}
});
});
\ No newline at end of file
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