Show Menu

Knockout.js Cheat Sheet by

Knockout.JS v3.3.0
knockout     knockoutjs

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-bind=”bindings”>html</div>
<!-- ko bindings -->­ht­ml­<!-- /ko -->
<script type="t­ext­/ht­ml" id="­T­"­>h­tml­</­scr­ipt­>
MSIE­Always quote if in { 'if': ... } bindings.

Observ­ables

.isOb­ser­vab­le()
.isWr­ita­ble­Obs­erv­able()
.isCo­mpu­ted()
.valu­eHa­sMu­tat­ed()
.subscribe(function(v) {}, trg, event­2­?­) : s
.noti­fyS­ubs­cri­ber­s(­cur­ren­tva­lue)
s.d­isp­ose()
1 Default to this.
2 change (default) or befor­eCh­ange.

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

() : value
(val­ue) : vm

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

() : []1
([]) : vm
.pop() : item
.push­(i­tem)
.shift() : item
.unsh­ift­(i­tem)
.remove(item)
.removeAll()
.inde­xOf­(i­tem) : -/#1
.reve­rse()
.slic­e(s, e) : []
.spli­ce(s, l, ) : []
.sort­(fu­nct­ion­(a, b)­? : -/0/+­2)
.destroy(item)R
.destroyAll() R
1 Get length: ().le­ngth. Get item: ()[i­­nd­ex]

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

() : value
1 Use ko.pu­reC­omp­uted if only observ­ables.
 

Appearance bindings

text: string
html: string
css: { class­:­bool, …}
style: { cssva­lue, …}
attr: { attri­but­eva­lue, }
visible: bool
template: string/{}

"­tem­pla­te" appearance binding

name: string
nodes: [DOM, …]
data: []
if: bool
foreach: []
as: string
afterRender: funct­ion­([DOM], context)
afterAdd: function
befor­eRe­move: function

Control flow bindings

foreach: []/{}
with: obser­vable
if: bool
ifnot: bool
compo­nent: obser­vable

"­for­eac­h" control flow binding

data: []
as: string
afterRender: function
afterAdd: function
befor­eRe­move: function
befor­eMove: function
after­Move: function
includeDestroyedR: bool

Form bindings

click: function
event: { event: function }
submit: function
value: string
texti­npu­t:1 string
enable: bool
disable: bool
hasFocus: bool
checked: bool
options: []/{}
uniqu­eName: bool
1 Updates value on keypress, clipboard, etc.

"­opt­ion­s" form bindings

optio­nsC­aption: string
optio­nsText: string
optio­nsV­alue: string
optio­nsA­fte­rRe­nder: function
selec­ted­Opt­ion­s1: []
value­All­owU­nset: bool
optio­nsI­ncl­ude­Des­tro­yed­R: bool
1 Only for multiple selects.
 

Context variables

$root : vm
$comp­onent : vm
$parent : vm
$pare­nts­[i­ndex] : vm
$data : vm
$rawData : vm
$element : DOM
$index1 : integer
$comp­one­ntT­emp­lat­eNodes : DOM array
$context : context
$parentContext : 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: milli­sec­onds, method: metho­d? } })
.extend({ notify: 'always' });
1 notif­yAt­Fix­edR­ate­/­not­ify­Whe­nCh­ang­esStop

Custom extenders

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

Download the Knockout.js Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/mwvdlee_knockout-js.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

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.