INCOMPLETE. Field marked with the token TODO means I haven't written it yet. Field marked with N/A means it can't be done (though I suspect that anything that can be done in one can be done in the other). Field or information marked with VERIFY means that I need to verify that it is correct.

In the Beginning: Setting Up an Application

Concept Angular Knockout
JavaScript. 1. Create a module1 to hold the application.
2. Define a controller with a name string and an initialization function.
HTML 1. Bind a major section element (<html>, <body>) to the module with the data-ng-app attribute.2
2. Bind a major container element (such as <div>) to the controller with the data-ng-controller attribute.

Data Binding

Concept Angular Knockout
What you can bind. 1) Regular variables attached to a scope. Changes to these variables are tracked and produce changes in bound elements. 1) Regular variables within a view model object; these are read once and changes are not tracked.
2) Special observable variables within a view model. Changes to these variables are tracked and produce changes in bound elements.
3) Calculated observables that can respond to changes in other observables.

Controlling text and appearance

Concept Angular Knockout
Make element visible. data-ng-show="<predicate>" data-bind="visible: <predicate>"
Make element invisible. data-ng-hide="<predicate>" data-bind="visible: <not-predicate>"
Bind text. data-ng-bind="<text>" data-bind="text: <text>"
Bind HTML. data-ng-bind-html="<html>"3 data-bind="html: <html>"
Bind CSS. TODO data-bind="css: <dynamic-class>"
data-bind="css: {<dynamic-class>: <predicate>}"
Bind a style. data-ng-style="<expression>" data-bind="style: { <style-attribute> : <style-value }"
Bind a general attribute. TODO data-bind="attr: { <name>: <value> }"

Control flow

Iterating over collections

Concept Angular Knockout
Iterate over a collection. In the element that will be repeated:
data-ng-repeat="<element-expression> in <collection-expression> | filter: <> | orderBy: <>"
In the element containing the element that will be repeated:
data-bind="foreach: <collection-expression>"
data-bind="foreach: { data: <collection-expression>, 'as': <name-string>"

Around markup that will be repeated:
<!— ko foreach: <collection-expression> >

/ko —>
Current value. <element-expression> specified in ng-repeat attribute $data
<name-string> (if specified in foreach bind)
Zero-based index of the current element. $index $index
Variable outside the iteration loop but inside the controller scope. <variable> $parent.<variable>

Other control flow

Concept Angular Knockout
Include markup given a condition. data-ng-if="<predicate>" data-bind: "if: <predicate>"
Include markup unless given a condition. data-ng-if="<not-predicate>" data-bind: "ifnot: <predicate>"
Create a new binding context, so that descendant elements are bound in the context of a specified object. TODO data-bind: "with: <expression>"
Inject a specified component into an element, and optionally pass parameters to it. TODO data-bind: "component : <component >"

Working with form fields

Concept Angular Knockout
Create a click binding. data-ng-click="<expression>" data-bind="click: <expression>"

The event binding
The submit binding
The enable binding
The disable binding
The value binding
The textInput binding
The hasFocus binding
The checked binding
The options binding
The selectedOptions binding
The uniqueName binding

Rendering templates

Concept Angular Knockout

The template binding

Binding syntax

Concept Angular Knockout

The data-bind syntax
The binding context




Modules + Dependency Injection

Automated Testing

Single-Page-Application Routing and History

Utility Functions

Concept Angular Knockout
Looping through an array. angular.forEach ko.utils.arrayForEach
Filtering an array. $filter() ko.utils.arrayFilter