Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Knockout.js presentation

4,408 views

Published on

  • Be the first to comment

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.

×