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-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;
};

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

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.