Show Menu
Cheatography

Knockout.js Cheat Sheet by

Knockout.JS v3.3.0

Annota­tions

See elsewhere
1
See footnote
?
Optional
R
Ruby on Rails

Viewmodel (JavaS­cript)

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

Templates (HTML)

<div data-b­ind=”bindings”>html</d­iv>
<!-- ko bindings -->html<!-- /ko -->
<script type="t­ext­/ht­ml" id="T">html</s­cri­pt>
MSIEAlways quote if in { 'if': ... } bindings.

Observ­ables

.isObs­erv­able()
.isWri­tab­leO­bse­rva­ble()
.isCom­puted()
.value­Has­Mut­ated()
.subsc­rib­e(f­unc­tion(v) {}, trg1?, event2?) : s
.notif­ySu­bsc­ribers(curren­tvalue)
s.dispose()
1 Default to this.
2 change (default) or before­Change.

ko.obs­erv­abl­e(v­alue)

() : value
(value) : vm

ko.obs­erv­abl­eAr­ray­(array)

() : []1
([]) : vm
.pop() : item
.push(item)
.shift() : item
.unshift(item)
.remove(item)
.remov­eAll()
.indexOf(item) : -/#1
.reverse()
.slice(s, e?) : []
.splice(s, l?, ?) : []
.sort(­fun­ction(a, b)? : -/0/+2)
.destroy(item)R
.destr­oyAll() R
1 Get length: ().length. Get item: ()[i­ndex]

ko.com­put­ed(­fun­ction() {})¹

() : value
1 Use ko.pur­eCo­mputed if only observ­ables.
 

Appearance bindings

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

"­tem­pla­te" appearance binding

name: string
nodes: [DOM, …]
data: []
if: bool
foreach: []
as: string
afterR­ender: functi­on(­[DOM], context)
afterAdd: function
before­Remove: function

Control flow bindings

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

"­for­eac­h" control flow binding

data: []
as: string
afterR­ender: function
afterAdd: function
before­Remove: function
before­Move: function
afterMove: function
includ­eDe­stroyedR: bool

Form bindings

click: function
event: { event: function }
submit: function
value: string
textinput:1 string
enable: bool
disable: bool
hasFocus: bool
checked: bool
options: []/{}
unique­Name: bool
1 Updates value on keypress, clipboard, etc.

"­opt­ion­s" form bindings

option­sCa­ption: string
option­sText: string
option­sValue: string
option­sAf­ter­Render: function
select­edO­ptions1: []
valueA­llo­wUnset: bool
option­sIn­clu­deD­est­royedR: bool
1 Only for multiple selects.
 

Context variables

$root : vm
$component : vm
$parent : vm
$parents[index] : vm
$data : vm
$rawData : vm
$element : DOM
$index1 : integer
$compo­nen­tTe­mpl­ate­Nodes : DOM array
$context : context
$paren­tCo­ntext : context
1 Only available in foreach loops.

Writable ko.com­put­ed(…)

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: millis­econds, method: method1? } })
.extend({ notify: 'always' });
1 notify­AtF­ixe­dRate/notify­Whe­nCh­ang­esStop

Custom extenders

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

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.