Terminology

$data The current data context.

$index The zero-based index of the current array item. In Knockout, this is an observable.

$parent The data context one level above the current context.

ko.applyBindings(<object>) Use <object> as a view model.

ko.observableArray() Create an empty observable array.

ko.observableArray(<array>) Create an observable array with initial contents specified by <array>.

ko.toJSON(<view-model>) Convert a Knockout view-model object to a JSON string representing the equivalent plain JavaScript object that contains only data.

ko.toJS(<view-model>) Convert a Knockout view-model object to a plain JavaScript object that contains only data.

ko.utils.arrayForEach(<array>,<function(item)>) Iterate over an array. Takes two parameters: The array over which to iterate, and the function that operates on each element.

Observable A special JavaScript object that can notify subscribers about changes, and can automatically detect dependencies.

Observable array A collection object that tracks which objects it holds, and notifies listeners when objects are added or removed.

<observable>.subscribe(<function(value)>) Create a callback to run when the value of the observable changes.

Facts, Thoughts and Opinions

Dump current binding context

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre> (dump to HTML)

'hidden' binding

ko.bindingHandlers.hidden = {
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.bindingHandlers.visible.update(element, function () { return !value; });
    }
};

Observable array members

An observable array tracks the contents of an array, not the state of the contents. Simply putting an object into an observable array doesn’t make all of that object’s properties themselves observable. You can make those properties observable if you wish, but that’s an independent choice.

'toggle' binding

Binds a click handler that simply toggles (or negates) a boolean observable. Useful for hiding, showing or collapsing UI elements.

ko.bindingHandlers.toggle = {
    init: function (element, valueAccessor) {
        var valueObservable = valueAccessor();
        ko.applyBindingsToNode(element, {
            click: function () {
                valueObservable (!valueObservable ());
            }
        });
    }
};

Images

[[/div]]