• A "Model View Viewmodel" user interface framework
  • Model - persistent data residing on the server
  • Viewmodel - the client-side model that drives the user interface
  • View - the user interface DOM elements
• Core functionality
  • Observables - implement the observer pattern
  • Data Binding - automatic View and Viewmodel synchronization
  • Computed Properties - automatic change propagation through data dependency graphs
• Limited in scope to user interface only
  • Does not deal with routing or AJAX
  • Gaps filled by Durandal.js
    • A complete Single Page App framework built on Knockout, Require.js and JQuery

• Shows popular JavaScript Frameworks related to building single page applications
• "Yes" means the feature is included
• blank means it is not included
• a library name means there is an additional library for the feature

Table fields:

• Size - minified library size
• GitHub Stars - number of people who have starred the repository (popularity indicator)
• Observable - the library has some means to observe changes in a model with named properties
• Computed Properties - explicitly supports data dependency graphs
• Data Binding - automatic synchronization between views and models
• Composable Views - views can contain other views (also called "partials")
• Routing - responding to changes in the URL hash fragment and parsing its parameters

More frameworks:

• SproutCore
• JSViews
• Spine.js
• Batman.js
• Meteor.js
• Enyo.js

• Illustrate Knockout features in small increments
• Meant to be as simple as possible (e.g. no Bootstrap or Grunt)
• Check out the example viewer

Listing of all examples:

• Example 1 - (run it! | index.html) - Starter HTML page with a text input
• Example 2 - (run it! | index.html) - DIY One-way Data Binding
• Example 3 - (run it! | index.html) - Hello Knockout
• Example 4 - (run it! | index.html) - Getting and setting observables
• Example 5 - (run it! | index.html) - Subscribing to observables
• Example 6 - (run it! | index.html) - Unsubscribing from observables
• Example 7 - (run it! | index.html) - Computed properties
• Example 8 - (run it! | index.html) - Subscribing to computed properties
• Example 9 - (run it! | index.html) - Hello Knockout
• Example 10 - (run it! | index.html) - Separating out JavaScript
• Example 11 - (run it! | index.html) - Isolating the viewModel
• Example 12 - (run it! | index.html) - Updating on key up
• Example 13 - (run it! | index.html) - Data binding with many text inputs
• Example 14 - (run it! | index.html) - Displaying first and last name
• Example 15 - (run it! | index.html) - Why object literals are not good viewmodels
• Example 16 - (run it! | index.html) - Using a viewmodel constructor function
• Example 17 - (run it! | index.html) - Binding 'this' for computed properties
• Example 18 - (run it! | index.html) - An alternative pattern avoiding 'this' and 'new'
• Example 19 - (run it! | index.html) - Observable arrays
• Example 20 - (run it! | index.html) - Using observable arrays in templates
• Example 21 - (run it! | index.html) - Adding entries to observable arrays using forms
• Example 22 - (run it! | index.html) - Clearing the entered name on submit
• Example 23 - (run it! | index.html) - Removing items from an observable array
• Example 24 - (run it! | index.html) - Enumerating objects - countries and their populations
• Example 25 - (run it! | index.html) - Building a table
• Example 26 - (run it! | index.html) - Fetching JSON for populating a table
• Example 27 - (run it! | index.html) - Adding a search query box
• Example 28 - (run it! | index.html) - Live search
• Example 29 - (run it! | index.html) - Object literal computed property gotcha
• Example 30 - (run it! | index.html) - Using a constructor function
• Example 31 - (run it! | index.html) - Simpler construction avoiding 'this' and 'new'
• Example 32 - (run it! | index.html) - Sorting countries by population
• Example 33 - (run it! | index.html) - Sorting by field, the wrong way
• Example 34 - (run it! | index.html) - Using inline click handler functions
• Example 35 - (run it! | index.html) - Using function.prototype.bind in click handler
• Example 36 - (run it! | index.html) - Using DOM attributes in click handler
• Example 37 - (run it! | index.html) - Interactively reversing sort order

• Rich Web UIs with Knockout.js - Steven Sanderson - A brief introduction to Knockout by its creator Steven Sanderson
• learn.knockoutjs.com - Knockout interactive tutorial
• Top JavaScript MVC Frameworks - Comparison of frameworks
• A Comparison of Angular, Backbone, CanJS and Ember
• URL Routing with Sammy.js and Knockout.js
• YouTube: A comparison of the two-way binding in AngularJS, EmberJS and KnockoutJS Surveys common features across libraries, lots of code examples
• YouTube: Getting the Most Out of Knockout js A deep dive into the internal organiation of Knockout, complex code examples