Knockout.js Cheat Sheet

A Programming › JavaScript cheat sheet in English by mwvdlee

Knockout.JS v3.3.0

21,048 views 5,766 downloads 2 Apr 2015 History

PRs

4.9 avg · 4 ratings

Annotations

	See elsewhere	¹	See footnote
^?	Optional	^R	Ruby on Rails

Viewmodel (JavaScript)

var *vm* = function(value) {
    this.*variable* = ko.observable(value);
};
ko.applyBindings(new *vm*('...'), DOM^?^);

Templates (HTML)

<div data-bind=”bindings”>html</div>

html

<script type="text/html" id="T">html</script>

^MSIEAlways quote if in { 'if': ... } bindings.

Observables

`.isObservable()`	`.isWritableObservable()`
`.isComputed()`	`.valueHasMutated()`
`.subscribe(function(v) {},` trg^1?`,` event^2?`)` : s
`.notifySubscribers(`currentvalue`)`
s`.dispose()`

¹ Default to this.
² change (default) or beforeChange.

ko.observable(value)

() : value

(value) : vm

ko.observableArray(array)

`()` : []¹	`(`[]`)` : vm
`.pop()` : item	`.push(`item`)`
`.shift()` : item	`.unshift(`item`)`
`.remove(`item`)`	`.removeAll()`
`.indexOf(`item`)` : -/#¹	`.reverse()`
`.slice(`s`,` e^?`)` : []	`.splice(`s`,` l^?`,` …^?`)` : []
`.sort(function(`a`,` b`)`^? : -/0/+²`)`
`.destroy(`item`)`^R	`.destroyAll()` ^R

¹ Get length: ().length. Get item: ()[index]

ko.computed(function() {})¹

() : value

¹ Use ko.pureComputed if only observables.

Appearance bindings

`text:` string	`html:` string
`css: {` class`:`bool`, …}`	`style: {` css`:`value`, …}`
`attr: {` attribute`:`value`,` … `}`
`visible:` bool	`template:` string/{}

"template" appearance binding

`name:` string	`nodes:` [DOM, …]
`data:` []	`if:` bool
`foreach:` []	`as:` string
`afterRender:` function([DOM], context)
`afterAdd:` function	`beforeRemove:` function

Control flow bindings

`foreach:` []/{}	`with:` observable
`if:` bool	`ifnot:` bool
`component:` observable

"foreach" control flow binding

`data:` []	`as:` string
`afterRender:` function
`afterAdd:` function	`beforeRemove:` function
`beforeMove:` function	`afterMove:` function
`includeDestroyed`^R`:` bool

Form bindings

`click:` function	`event: {` event`:` function `}`
`submit:` function
`value:` string	`textinput:`¹ string
`enable:` bool	`disable:` bool
`hasFocus:` bool	`checked:` bool
`options:` []/{}	`uniqueName:` bool

¹ Updates value on keypress, clipboard, etc.

"options" form bindings

`optionsCaption:` string
`optionsText:` string	`optionsValue:` string
`optionsAfterRender:` function
`selectedOptions`¹`:` []	`valueAllowUnset:` bool
`optionsIncludeDestroyed`^R`:` bool

¹ Only for multiple selects.

Context variables

`$root` : vm	`$component` : vm
`$parent` : vm	`$parents[`index`]` : vm
`$data` : vm	`$rawData` : vm
`$element` : DOM	`$index`¹ : integer
`$componentTemplateNodes` : DOM array
`$context` : context	`$parentContext` : context

¹ Only available in foreach loops.

Writable ko.computed(…)

this.value = ko.observable();
this.double = ko.pureComputed({
  read: function () { return this.value * 2; },
  write: function(v) { this.value(v / 2); },
  owner: this^**?**^
});

Builtin extenders

.extend({ rateLimit: { timeout: milliseconds, method: method^1? } })

.extend({ notify: 'always' });

¹ notifyAtFixedRate/notifyWhenChangesStop

Custom extenders

ko.extenders.log = function(target, option) {
    target.subscribe(function(newValue) {
       console.log(option + ": " + newValue);
    });
    return target;
};

Badges

Good Cheat Sheet Nice Cheat Sheet Downloaded from Unusual Locations × 1

Comments

No comments yet.

Knockout.js Cheat Sheet

Annota­tions

Viewmodel (JavaS­cript)