More Related Content Similar to Knockout.js presentation Similar to Knockout.js presentation (20) Knockout.js presentation11. PART 2:
TO DO LIST
http://jsfiddle.net/scottmessinger/pC4zY/16/
13. TASK 1:
SHOW SOME TODOS
http://jsfiddle.net/scottmessinger/RtGyu/5/
http://knockoutjs.com/documentation/introduction.html
14. Do the highlights.
Add “todo done” classes if done
Add “todo” if not done.
<script id="todoitemtemplate"type="text/html">
<li>
<div data-bind="">
<div class="display">
<input class="check"type="checkbox" data-bind="" />
<div class="todo-content"contenteditable="true" data-bind=""></div>
<span class="todo-destroy" data-bind=""></span>
</div>
</div>
</li>
</script>
http://jsfiddle.net/scottmessinger/RtGyu/5/
15. The answer!
<ul id="todo-list" data-bind="template: { name: 'todoitemtemplate', foreach: todos }">
</ul>
<script id="todoitemtemplate"type="text/html">
<li>
<div data-bind="attr: { class : done() ? 'todo done' : 'todo'}">
<div class="display">
<input class="check"type="checkbox" data-bind="checked: done" />
<div class="todo-content"contenteditable="true" data-bind="text: content"></di
<span class="todo-destroy" data-bind="click: viewModel.remove"></span>
</div>
</div>
</li>
</script>
16. TASK 2:
REMOVE SOME TODOS
http://jsfiddle.net/scottmessinger/RtGyu/5/
http://knockoutjs.com/documentation/introduction.html
17. Do the highlights.
<div id="todo-stats" >
// CODE
<span class="todo-clear" data-bind="visible: done().length > 0">
<a href="#" data-bind="">
// CODE
</a>
</span>
</div>
<script id="todoitemtemplate"type="text/html">
<li>
<div data-bind="attr: { class : done() ? 'todo done' : 'todo'}">
<div class="display">
<input class="check"type="checkbox" data-bind="checked: done" />
<div class="todo-content"contenteditable="true" data-bind="text: content"></div>
<span class="todo-destroy" data-bind=""></span>
</div>
</div>
</li>
</script>
18. Do the highlights.
<div id="todo-stats" >
// CODE
<span class="todo-clear" data-bind="visible: done().length > 0">
<a href="#" data-bind="click: viewModel.removeCompleted">
// CODE
</a>
</span>
</div>
<script id="todoitemtemplate"type="text/html">
<li>
<div data-bind="attr: { class : done() ? 'todo done' : 'todo'}">
<div class="display">
<input class="check"type="checkbox" data-bind="checked: done" />
<div class="todo-content"contenteditable="true" data-bind="text: content"></div>
<span class="todo-destroy" data-bind="click: viewModel.remove"></span>
</div>
</div>
</li>
</script>
19. Do the highlights
// VIEWMODEL
var viewModel = {
todos: ko.observableArray(),
current: ko.observable(),
add: function (event) {
if (event.keyCode === 13) {
var newTodo = new Todo(this.current());
this.todos.push(newTodo); Methods to
console.log(newTodo)
Know:
this.current("");
}
}, remove()
removeAll()
remove: function (event) {
viewModel.todos.remove(this);
},
removeCompleted: function (event) {
viewModel.todos.removeAll(viewModel.done());
}
};
20. Do the highlights
// VIEWMODEL
var viewModel = {
todos: ko.observableArray(),
current: ko.observable(),
add: function (event) {
if (event.keyCode === 13) {
var newTodo = new Todo(this.current());
this.todos.push(newTodo); Methods to
console.log(newTodo) Know:
this.current("");
}
},
remove()
remove: function (event) { removeAll()
},
removeCompleted: function (event) {
}
};
23. Learning more about
knockout.js
knockoutjs.com
knockmeout.net
https://groups.google.com/
forum/#!forum/knockoutjs
Editor's Notes \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n