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
Sven Franck
todomvc
Commits
2206d218
Commit
2206d218
authored
Mar 28, 2015
by
Arthur Verschaeve
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
typescript-backbone: use correct variable names
Ref #359 Close #1237
parent
c0762487
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
64 additions
and
101 deletions
+64
-101
examples/typescript-backbone/index.html
examples/typescript-backbone/index.html
+6
-6
examples/typescript-backbone/js/app.js
examples/typescript-backbone/js/app.js
+34
-71
examples/typescript-backbone/js/app.ts
examples/typescript-backbone/js/app.ts
+24
-24
No files found.
examples/typescript-backbone/index.html
View file @
2206d218
...
...
@@ -77,13 +77,13 @@ https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html
<!-- Templates -->
<script
type=
"text/template"
id=
"item-template"
>
<
div
class
=
"
todo <%=
done
? 'done' : '' %>
"
>
<
div
class
=
"
todo <%=
completed
? 'done' : '' %>
"
>
<
div
class
=
"
view display
"
>
<
input
class
=
"
toggle check
"
type
=
"
checkbox
"
<%=
done
?
'
checked
'
:
''
%>>
<
label
class
=
"
todo-content
"
><%=
content
%><
/label
>
<
input
class
=
"
toggle check
"
type
=
"
checkbox
"
<%=
completed
?
'
checked
'
:
''
%>>
<
label
class
=
"
todo-content
"
><%=
title
%><
/label
>
<
button
class
=
"
destroy
"
><
/button
>
<
/div
>
<
input
class
=
"
edit todo-input
"
value
=
"
<%=
content
%>
"
>
<
input
class
=
"
edit todo-input
"
value
=
"
<%=
title
%>
"
>
<
/div
>
</script>
...
...
@@ -94,9 +94,9 @@ https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html
<
span
class
=
"
word
"
><%=
remaining
==
1
?
'
item
'
:
'
items
'
%><
/span> lef
t
<
/span
>
<%
}
%>
<%
if
(
done
)
{
%>
<%
if
(
completed
)
{
%>
<
span
class
=
"
todo-clear
"
>
<
button
id
=
"
clear-completed
"
>
Clear
completed
(
<
span
class
=
"
number-done
"
><%=
done
%><
/span>
)
</
button
>
<
button
id
=
"
clear-completed
"
>
Clear
completed
(
<
span
class
=
"
number-done
"
><%=
completed
%><
/span>
)
</
button
>
<
/span
>
<%
}
%>
</script>
...
...
examples/typescript-backbone/js/app.js
View file @
2206d218
...
...
@@ -4,14 +4,18 @@ Microsoft grants you the right to use these script files under the Apache 2.0 li
Microsoft reserves all other rights to the files not expressly granted by Microsoft,
whether by implication, estoppel or otherwise. The copyright notices and MIT licenses
below are for informational purposes only.
Portions Copyright © Microsoft Corporation
Apache 2.0 License
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations
under the License.
------------------------------------------------------------------------------------------
...
...
@@ -22,8 +26,10 @@ software and associated documentation files (the "Software"), to deal in the Sof
without restriction, including without limitation the rights to use, copy, modify, merge,
publish, distribute, sublicense, and/or sell copies of the Software, and to permit
persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies
or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
...
...
@@ -39,10 +45,9 @@ var __extends = this.__extends || function (d, b) {
__
.
prototype
=
b
.
prototype
;
d
.
prototype
=
new
__
();
};
// Todo Model
// ----------
// Our basic **Todo** model has `
content`, `order`, and `done
` attributes.
// Our basic **Todo** model has `
title`, `order`, and `completed
` attributes.
var
Todo
=
(
function
(
_super
)
{
__extends
(
Todo
,
_super
);
function
Todo
()
{
...
...
@@ -51,30 +56,26 @@ var Todo = (function (_super) {
// Default attributes for the todo.
Todo
.
prototype
.
defaults
=
function
()
{
return
{
content
:
''
,
done
:
false
title
:
''
,
completed
:
false
};
};
// Ensure that each todo created has `content`.
// Ensure that each todo created has `title`.
Todo
.
prototype
.
initialize
=
function
()
{
if
(
!
this
.
get
(
'
content
'
))
{
this
.
set
({
'
content
'
:
this
.
defaults
().
content
});
if
(
!
this
.
get
(
'
title
'
))
{
this
.
set
({
'
title
'
:
this
.
defaults
().
title
});
}
};
// Toggle the `done` state of this todo item.
// Toggle the `completed` state of this todo item.
Todo
.
prototype
.
toggle
=
function
()
{
this
.
save
({
done
:
!
this
.
get
(
'
done
'
)
});
this
.
save
({
completed
:
!
this
.
get
(
'
completed
'
)
});
};
// Remove this Todo from *localStorage* and delete its view.
Todo
.
prototype
.
clear
=
function
()
{
this
.
destroy
();
};
return
Todo
;
})(
Backbone
.
Model
);
// Todo Collection
// ---------------
// The collection of todos is backed by *localStorage* instead of a remote
...
...
@@ -88,18 +89,14 @@ var TodoList = (function (_super) {
// Save all of the todo items under the `'todos'` namespace.
this
.
localStorage
=
new
Store
(
'
todos-typescript-backbone
'
);
}
// Filter down the list of all todo items that are finished.
TodoList
.
prototype
.
done
=
function
()
{
return
this
.
filter
(
function
(
todo
)
{
return
todo
.
get
(
'
done
'
);
});
// Filter down the list of all todo items that are completed.
TodoList
.
prototype
.
completed
=
function
()
{
return
this
.
filter
(
function
(
todo
)
{
return
todo
.
get
(
'
completed
'
);
});
};
// Filter down the list to only todo items that are still not finished.
// Filter down the list to only todo items that are still not completed.
TodoList
.
prototype
.
remaining
=
function
()
{
return
this
.
without
.
apply
(
this
,
this
.
done
());
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.
TodoList
.
prototype
.
nextOrder
=
function
()
{
...
...
@@ -107,17 +104,14 @@ var TodoList = (function (_super) {
return
1
;
return
this
.
last
().
get
(
'
order
'
)
+
1
;
};
// Todos are sorted by their original insertion order.
TodoList
.
prototype
.
comparator
=
function
(
todo
)
{
return
todo
.
get
(
'
order
'
);
};
return
TodoList
;
})(
Backbone
.
Collection
);
// Create our global collection of **Todos**.
var
Todos
=
new
TodoList
();
// Todo Item View
// --------------
// The DOM element for a todo item...
...
...
@@ -126,7 +120,6 @@ var TodoView = (function (_super) {
function
TodoView
(
options
)
{
//... is a list tag.
this
.
tagName
=
'
li
'
;
// The DOM events specific to an item.
this
.
events
=
{
'
click .check
'
:
'
toggleDone
'
,
...
...
@@ -136,12 +129,9 @@ var TodoView = (function (_super) {
'
keydown .edit
'
:
'
revertOnEscape
'
,
'
blur .edit
'
:
'
close
'
};
_super
.
call
(
this
,
options
);
// Cache the template function for a single item.
this
.
template
=
_
.
template
(
$
(
'
#item-template
'
).
html
());
_
.
bindAll
(
this
,
'
render
'
,
'
close
'
,
'
remove
'
);
this
.
model
.
bind
(
'
change
'
,
this
.
render
);
this
.
model
.
bind
(
'
destroy
'
,
this
.
remove
);
...
...
@@ -152,48 +142,40 @@ var TodoView = (function (_super) {
this
.
input
=
this
.
$
(
'
.todo-input
'
);
return
this
;
};
// Toggle the `'done'` state of the model.
// Toggle the `completed` state of the model.
TodoView
.
prototype
.
toggleDone
=
function
()
{
this
.
model
.
toggle
();
};
// Switch this view into `'editing'` mode, displaying the input field.
TodoView
.
prototype
.
edit
=
function
()
{
this
.
$el
.
addClass
(
'
editing
'
);
this
.
input
.
focus
();
};
// Close the `'editing'` mode, saving changes to the todo.
TodoView
.
prototype
.
close
=
function
()
{
var
trimmedValue
=
this
.
input
.
val
().
trim
();
if
(
trimmedValue
)
{
this
.
model
.
save
({
content
:
trimmedValue
});
}
else
{
this
.
model
.
save
({
title
:
trimmedValue
});
}
else
{
this
.
clear
();
}
this
.
$el
.
removeClass
(
'
editing
'
);
};
// If you hit `enter`, we're through editing the item.
TodoView
.
prototype
.
updateOnEnter
=
function
(
e
)
{
if
(
e
.
which
===
TodoView
.
ENTER_KEY
)
this
.
close
();
};
// If you're pressing `escape` we revert your change by simply leaving
// the `editing` state.
TodoView
.
prototype
.
revertOnEscape
=
function
(
e
)
{
if
(
e
.
which
===
TodoView
.
ESC_KEY
)
{
this
.
$el
.
removeClass
(
'
editing
'
);
// Also reset the hidden input back to the original value.
this
.
input
.
val
(
this
.
model
.
get
(
'
content
'
));
this
.
input
.
val
(
this
.
model
.
get
(
'
title
'
));
}
};
// Remove the item, destroy the model.
TodoView
.
prototype
.
clear
=
function
()
{
this
.
model
.
clear
();
...
...
@@ -202,7 +184,6 @@ var TodoView = (function (_super) {
TodoView
.
ESC_KEY
=
27
;
return
TodoView
;
})(
Backbone
.
View
);
// The Application
// ---------------
// Our overall **AppView** is the top-level piece of UI.
...
...
@@ -216,72 +197,61 @@ var AppView = (function (_super) {
'
click .todo-clear button
'
:
'
clearCompleted
'
,
'
click .mark-all-done
'
:
'
toggleAllComplete
'
};
// Instead of generating a new element, bind to the existing skeleton of
// the App already present in the HTML.
this
.
setElement
(
$
(
'
#todoapp
'
),
true
);
// 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*.
_
.
bindAll
(
this
,
'
addOne
'
,
'
addAll
'
,
'
render
'
,
'
toggleAllComplete
'
);
this
.
input
=
this
.
$
(
'
#new-todo
'
);
this
.
allCheckbox
=
this
.
$
(
'
.mark-all-done
'
)[
0
];
this
.
mainElement
=
this
.
$
(
'
#main
'
)[
0
];
this
.
footerElement
=
this
.
$
(
'
#footer
'
)[
0
];
this
.
statsTemplate
=
_
.
template
(
$
(
'
#stats-template
'
).
html
());
Todos
.
bind
(
'
add
'
,
this
.
addOne
);
Todos
.
bind
(
'
reset
'
,
this
.
addAll
);
Todos
.
bind
(
'
all
'
,
this
.
render
);
Todos
.
fetch
();
}
// Re-rendering the App just means refreshing the statistics -- the rest
// of the app doesn't change.
AppView
.
prototype
.
render
=
function
()
{
var
done
=
Todos
.
done
().
length
;
var
completed
=
Todos
.
completed
().
length
;
var
remaining
=
Todos
.
remaining
().
length
;
if
(
Todos
.
length
)
{
this
.
mainElement
.
style
.
display
=
'
block
'
;
this
.
footerElement
.
style
.
display
=
'
block
'
;
this
.
$
(
'
#todo-stats
'
).
html
(
this
.
statsTemplate
({
total
:
Todos
.
length
,
done
:
done
,
completed
:
completed
,
remaining
:
remaining
}));
}
else
{
}
else
{
this
.
mainElement
.
style
.
display
=
'
none
'
;
this
.
footerElement
.
style
.
display
=
'
none
'
;
}
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>`.
AppView
.
prototype
.
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.
AppView
.
prototype
.
addAll
=
function
()
{
Todos
.
each
(
this
.
addOne
);
};
// Generate the attributes for a new Todo item.
AppView
.
prototype
.
newAttributes
=
function
()
{
return
{
content
:
this
.
input
.
val
().
trim
(),
title
:
this
.
input
.
val
().
trim
(),
order
:
Todos
.
nextOrder
(),
done
:
false
completed
:
false
};
};
// If you hit return in the main input field, create new **Todo** model,
// persisting it to *localStorage*.
AppView
.
prototype
.
createOnEnter
=
function
(
e
)
{
...
...
@@ -290,24 +260,17 @@ var AppView = (function (_super) {
this
.
input
.
val
(
''
);
}
};
// Clear all done todo items, destroying their models.
// Clear all completed todo items, destroying their models.
AppView
.
prototype
.
clearCompleted
=
function
()
{
_
.
each
(
Todos
.
done
(),
function
(
todo
)
{
return
todo
.
clear
();
});
_
.
each
(
Todos
.
completed
(),
function
(
todo
)
{
return
todo
.
clear
();
});
return
false
;
};
AppView
.
prototype
.
toggleAllComplete
=
function
()
{
var
done
=
this
.
allCheckbox
.
checked
;
Todos
.
each
(
function
(
todo
)
{
return
todo
.
save
({
'
done
'
:
done
});
});
var
completed
=
this
.
allCheckbox
.
checked
;
Todos
.
each
(
function
(
todo
)
{
return
todo
.
save
({
'
completed
'
:
completed
});
});
};
return
AppView
;
})(
Backbone
.
View
);
// Load the application once the DOM is ready, using `jQuery.ready`:
$
(
function
()
{
// Finally, we kick things off by creating the **App**.
...
...
examples/typescript-backbone/js/app.ts
View file @
2206d218
...
...
@@ -93,27 +93,27 @@ declare var Store: any;
// Todo Model
// ----------
// Our basic **Todo** model has `
content`, `order`, and `done
` attributes.
// Our basic **Todo** model has `
title`, `order`, and `completed
` attributes.
class
Todo
extends
Backbone
.
Model
{
// Default attributes for the todo.
defaults
()
{
return
{
content
:
''
,
done
:
false
title
:
''
,
completed
:
false
}
}
// Ensure that each todo created has `
content
`.
// Ensure that each todo created has `
title
`.
initialize
()
{
if
(
!
this
.
get
(
'
content
'
))
{
this
.
set
({
'
content
'
:
this
.
defaults
().
content
});
if
(
!
this
.
get
(
'
title
'
))
{
this
.
set
({
'
title
'
:
this
.
defaults
().
title
});
}
}
// Toggle the `
done
` state of this todo item.
// Toggle the `
completed
` state of this todo item.
toggle
()
{
this
.
save
({
done
:
!
this
.
get
(
'
done
'
)
});
this
.
save
({
completed
:
!
this
.
get
(
'
completed
'
)
});
}
// Remove this Todo from *localStorage* and delete its view.
...
...
@@ -136,14 +136,14 @@ class TodoList extends Backbone.Collection {
// Save all of the todo items under the `'todos'` namespace.
localStorage
=
new
Store
(
'
todos-typescript-backbone
'
);
// Filter down the list of all todo items that are
finish
ed.
done
()
{
return
this
.
filter
((
todo
:
Todo
)
=>
todo
.
get
(
'
done
'
));
// Filter down the list of all todo items that are
complet
ed.
completed
()
{
return
this
.
filter
((
todo
:
Todo
)
=>
todo
.
get
(
'
completed
'
));
}
// Filter down the list to only todo items that are still not
finish
ed.
// Filter down the list to only todo items that are still not
complet
ed.
remaining
()
{
return
this
.
without
.
apply
(
this
,
this
.
done
());
return
this
.
without
.
apply
(
this
,
this
.
completed
());
}
// We keep the Todos in sequential order, despite being saved by unordered
...
...
@@ -212,7 +212,7 @@ class TodoView extends Backbone.View {
return
this
;
}
// Toggle the `
'done'
` state of the model.
// Toggle the `
completed
` state of the model.
toggleDone
()
{
this
.
model
.
toggle
();
}
...
...
@@ -228,7 +228,7 @@ class TodoView extends Backbone.View {
var
trimmedValue
=
this
.
input
.
val
().
trim
();
if
(
trimmedValue
)
{
this
.
model
.
save
({
content
:
trimmedValue
});
this
.
model
.
save
({
title
:
trimmedValue
});
}
else
{
this
.
clear
();
}
...
...
@@ -247,7 +247,7 @@ class TodoView extends Backbone.View {
if
(
e
.
which
===
TodoView
.
ESC_KEY
)
{
this
.
$el
.
removeClass
(
'
editing
'
);
// Also reset the hidden input back to the original value.
this
.
input
.
val
(
this
.
model
.
get
(
'
content
'
));
this
.
input
.
val
(
this
.
model
.
get
(
'
title
'
));
}
}
...
...
@@ -304,7 +304,7 @@ class AppView extends Backbone.View {
// Re-rendering the App just means refreshing the statistics -- the rest
// of the app doesn't change.
render
()
{
var
done
=
Todos
.
done
().
length
;
var
completed
=
Todos
.
completed
().
length
;
var
remaining
=
Todos
.
remaining
().
length
;
if
(
Todos
.
length
)
{
...
...
@@ -313,7 +313,7 @@ class AppView extends Backbone.View {
this
.
$
(
'
#todo-stats
'
).
html
(
this
.
statsTemplate
({
total
:
Todos
.
length
,
done
:
done
,
completed
:
completed
,
remaining
:
remaining
}));
}
else
{
...
...
@@ -339,9 +339,9 @@ class AppView extends Backbone.View {
// Generate the attributes for a new Todo item.
newAttributes
()
{
return
{
content
:
this
.
input
.
val
().
trim
(),
title
:
this
.
input
.
val
().
trim
(),
order
:
Todos
.
nextOrder
(),
done
:
false
completed
:
false
};
}
...
...
@@ -354,15 +354,15 @@ class AppView extends Backbone.View {
}
}
// Clear all
done
todo items, destroying their models.
// Clear all
completed
todo items, destroying their models.
clearCompleted
()
{
_
.
each
(
Todos
.
done
(),
(
todo
:
Todo
)
=>
todo
.
clear
());
_
.
each
(
Todos
.
completed
(),
(
todo
:
Todo
)
=>
todo
.
clear
());
return
false
;
}
toggleAllComplete
()
{
var
done
=
this
.
allCheckbox
.
checked
;
Todos
.
each
((
todo
:
Todo
)
=>
todo
.
save
({
'
done
'
:
done
}));
var
completed
=
this
.
allCheckbox
.
checked
;
Todos
.
each
((
todo
:
Todo
)
=>
todo
.
save
({
'
completed
'
:
completed
}));
}
}
...
...
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