Show Menu
Cheatography
  1. Home >
  2. Programming >

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

Metadata

  • Languages:
  • Published: 2nd April, 2015
  • Last Updated: 13th May, 2016
  • Rated: 5 out of 5 stars based on 5 ratings

Favourited By

charaf ess MSC Web Solutions

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.