1. KNOCKOUT.JS
Scott Messinger - Baltimore JS Meetup - July 27, 2011

2. WHO AM I?

3. WHAT IS KNOCKOUT.JS?

4. MODEL/VIEW/VIEWMODEL
MVVM

5. Pretty Pictures.
DB DB

6. KO AUTOMATICALLY
UPDATES YOUR DOM.

7. HISTORY

8. MICROSOFT. SILVERLIGHT.
WPF.

9. LET’S CHECK IT OUT.

10. PART 1: CONTACT EDITOR.
HTTP://JSBIN.COM/UVUBEM/6/EDIT

11. PART 2:
TO DO LIST
http://jsfiddle.net/scottmessinger/pC4zY/16/

12. LET ME SHOW YOU AROUND.

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) {
}
};

21. PROBLEMS WITH MVVM

22. CODE WALK
https://gist.github.com/1109917

23. Learning more about
knockout.js
knockoutjs.com
knockmeout.net
https://groups.google.com/
forum/#!forum/knockoutjs

24. QUESTIONS.