KNOCKOUT.JSScott Messinger - Baltimore JS Meetup - July 27, 2011
WHO AM I?
WHAT IS KNOCKOUT.JS?
MODEL/VIEW/VIEWMODEL        MVVM
Pretty Pictures.DB               DB
KO AUTOMATICALLYUPDATES YOUR DOM.
HISTORY
MICROSOFT. SILVERLIGHT.        WPF.
LET’S CHECK IT OUT.
PART 1: CONTACT EDITOR. HTTP://JSBIN.COM/UVUBEM/6/EDIT
PART 2:      TO DO LISThttp://jsfiddle.net/scottmessinger/pC4zY/16/
LET ME SHOW YOU AROUND.
TASK 1: SHOW SOME TODOS     http://jsfiddle.net/scottmessinger/RtGyu/5/http://knockoutjs.com/documentation/introduction.html
Do the highlights.                                 Add “todo done” classes if done                                    Add ...
The answer!      <ul id="todo-list" data-bind="template: { name: todoitemtemplate, foreach: todos }">      </ul>      <scr...
TASK 2:REMOVE SOME TODOS        http://jsfiddle.net/scottmessinger/RtGyu/5/http://knockoutjs.com/documentation/introduction...
Do the highlights.                 <div id="todo-stats" >                     // CODE                     <span class="tod...
Do the highlights.                 <div id="todo-stats" >                     // CODE                     <span class="tod...
Do the highlights// VIEWMODELvar viewModel = {    todos: ko.observableArray(),    current: ko.observable(),    add: functi...
Do the highlights// VIEWMODELvar viewModel = {    todos: ko.observableArray(),    current: ko.observable(),    add: functi...
PROBLEMS WITH MVVM
CODE WALKhttps://gist.github.com/1109917
Learning more about          knockout.jsknockoutjs.comknockmeout.nethttps://groups.google.com/forum/#!forum/knockoutjs
QUESTIONS.
Upcoming SlideShare
Loading in...5
×

Knockout.js presentation

3,388

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,388
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
117
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Knockout.js presentation

    1. 1. KNOCKOUT.JSScott Messinger - Baltimore JS Meetup - July 27, 2011
    2. 2. WHO AM I?
    3. 3. WHAT IS KNOCKOUT.JS?
    4. 4. MODEL/VIEW/VIEWMODEL MVVM
    5. 5. Pretty Pictures.DB DB
    6. 6. KO AUTOMATICALLYUPDATES YOUR DOM.
    7. 7. HISTORY
    8. 8. MICROSOFT. SILVERLIGHT. WPF.
    9. 9. LET’S CHECK IT OUT.
    10. 10. PART 1: CONTACT EDITOR. HTTP://JSBIN.COM/UVUBEM/6/EDIT
    11. 11. PART 2: TO DO LISThttp://jsfiddle.net/scottmessinger/pC4zY/16/
    12. 12. LET ME SHOW YOU AROUND.
    13. 13. TASK 1: SHOW SOME TODOS http://jsfiddle.net/scottmessinger/RtGyu/5/http://knockoutjs.com/documentation/introduction.html
    14. 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. 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. 16. TASK 2:REMOVE SOME TODOS http://jsfiddle.net/scottmessinger/RtGyu/5/http://knockoutjs.com/documentation/introduction.html
    17. 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. 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. 19. Do the highlights// VIEWMODELvar 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. 20. Do the highlights// VIEWMODELvar 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. 21. PROBLEMS WITH MVVM
    22. 22. CODE WALKhttps://gist.github.com/1109917
    23. 23. Learning more about knockout.jsknockoutjs.comknockmeout.nethttps://groups.google.com/forum/#!forum/knockoutjs
    24. 24. QUESTIONS.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×