• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Knockout.js presentation
 

Knockout.js presentation

on

  • 3,450 views

 

Statistics

Views

Total Views
3,450
Views on SlideShare
3,366
Embed Views
84

Actions

Likes
3
Downloads
100
Comments
0

3 Embeds 84

http://speakerrate.com 79
http://www.linkedin.com 3
https://www.linkedin.com 2

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Knockout.js presentation Presentation Transcript

  • 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 “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/
  • 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>
  • TASK 2:REMOVE SOME TODOS http://jsfiddle.net/scottmessinger/RtGyu/5/http://knockoutjs.com/documentation/introduction.html
  • 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>
  • 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>
  • 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());    }};
  • 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) {    }};
  • PROBLEMS WITH MVVM
  • CODE WALKhttps://gist.github.com/1109917
  • Learning more about knockout.jsknockoutjs.comknockmeout.nethttps://groups.google.com/forum/#!forum/knockoutjs
  • QUESTIONS.