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­stroyed
R
: 
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­ptions
1
: 
[]
valueA­llo­wUnset: 
bool
option­sIn­clu­deD­est­royed
R
: 
bool
1 Only for multiple selects.
 

Context variables

$root
: vm
$component
: vm
$parent
: vm
$parents[
index
]
: vm
$data
: vm
$rawData
: vm
$element
: DOM
$index
1 : 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.