Knockout is a MVVM-style binding JavaScript framework. Home: http://knockoutjs.com/ – there are docs, tutorials (interactive also) and other. Could be extended by custom bindings.
View Model – pure JavaScript object.
To activate knockout on page: ko.applyBindings(viewModelObjectInstance); Can take second param (DOM object) to activate certain object only.
Observables
ko.observable() - functions that can update the UI when data changes, when setting multiple observables you could chain calls.
Computed
ko.computed() – computed observable. 1st par\am – computing func, second (optional) – ‘this’ for that func. With passing object like {read:func, write:func, owner: obj} you could create writeable computed observable. Computed recomputes dependencies when created and on each run. Circular are avoided (doesn’t enters reevaluating itself).
ko.isComputed(obj) – for all computed
ko.isObservable(obj) – for observables, observableArrays, all computed
ko.isWriteableObservable(obj) – for observables, observableArrays, writeable computed
Observable Arrays
Collections.
Methods like native: indexOf, slice, pop, push, shift, unshift, reverse, sort, splice. unshift\shift = push\pop but for array start. splice = slice with removing from source array.
Own methods: remove, removeAll. destroy, destroyAll – set _destroy property to objects.
Bindings
Are done via HTML attribute data-bind, like <input data-bind=”text: myName”/>.
visible – applies to .style.display – sets to none or resets back to prev value.
text – sets the element content (innerText or textContent). Escapes the HTML. Could be used in containerless syntax (when no container is allowed in place where you need text) <!——ko text: name——> <!——/ko——>.
html – works with innerHTML.
css – add/remove classes. Static syntax - takes JavaScript object= “css {className: bool_JS_Expr }”. Dynamic syntax= “css: propertyName”.
style – takes JavaScript object. Use fontWeight instead off font-weight (see more in doc)
attr – any attribute. Takes JavaScript object.
Control flow
foreach – iterates by array copying the underlying HTML template. Could take a JS object, param data means array, as is an alias to be used in underlying HTML, there are also several callbacks. Also could use containerless binding syntax.
if, ifnot – adds or removes DOM and maintains bindings. Could be in containerless syntax.
with – creates binding context. Supports containerless.
Form bindings
click – binds a function. First param DOM object, second – event. clickBubble binding allows to sop bubbling. Return true from func to allow default action.
event – bind func to any event. Uses JS object syntax. Params and default action are as in click binding, bubbling is also similer (youreventBubble: false)
submit – like click.
enable, disable, hasFocus – intuitive.
value – for input, select, textarea (use checked for checkboxes).
checked – for checkboxes ad radiobuttons.
options, selectedOptions – for select. Main param is an array.
Templates
Use template binding. Can take either id of template or JS object with params. Manages the DOM to be generated inside and data to be used for binding.
Binding context
$parent, $parents (all parents chain), $root, $data (current context), $index(foreach only), $parentContext (for nested loops), $rawData (usually the same as $data), $context (current binding context), $element (DOM element for current binding).
