Knockout.js Cheat Sheet by mwvdlee via cheatography.com/2275/cs/3811/ Annotat​ ions ko.obse​ rva​ ble​ Arr​ ay(​ array) Control flow bindings See elsewhere 1 See footnote () : []1 ([]) : vm foreach: []/{} with: observ​ able ? Optional R Ruby on Rails .pop() : item .push(​ it​ em) if: bool ifnot: bool .shift() : item .unshi​ ft(​ it​ em) compon​ ent: observ​ able Viewmodel (JavaSc​ ript) .remove(item) .removeAll() var vm = function(value) { "f​ ore​ ach​ " control flow binding .index​ Of(​ it​ em) .rever​ se() ​ ​ ​ t​ his​ .v​ ari​ able = : -/#1 data: [] as: string ko.obse​ rva​ ble​ (va​ lue); ​ s e?​ : ​ s l?​ afterRender: function }; .slice( , ) .splice( , , [] …?)​ : [] ko.appl​ yBi​ ndi​ ngs​ (new vm('...'), afterAdd: before​ Rem​ ove: DOM?); .sort(​ fun​ cti​ on(​ a, b)?​ : -/0/+​2) function function ​ ​ function .destroy(item)R .destroyAll() R beforeMove: afterMove: Templates (HTML) function 1 Get length: ().len​ gth. Get item: () R <div data-bind=”bindings”>html</div> includeDestroyed : bool [in​ de​ x] <!-- ko bindings -->​htm​ l<​ !-- /ko - Form bindings -> ko.comp​ ute​ d(f​ unc​ tion() {})¹ click: event: { event: function <script type="te​ xt/​ htm​ l" () : value function } id="T​ "​ >​ ht​ ml<​ /s​ cri​ pt>​ 1 Use ko.pur​ eCo​ mpu​ ted if only submit: function MSIEA​ lways quote if in { 'if': ... } observa​ bles. ​ ​ 1 bindings. value: string textinput: string Appearance bindings enable: bool disable: bool Observa​ bles text: string html: string hasFocus: checked: bool .isObs​ erv​ abl​ .isWri​ tab​ leO​ bse​ rva​ bl bool css: { style: { e() e() class:​ b​ ool, …} css:​val​ ue, …} options: []/{} unique​ Name: bool .isCom​ put​ ed( .value​ Has​ Mut​ ate​ d() attr: { attrib​ ute​ :​val​ ue, … } ) 1 Updates value on keypress, clipboard, etc. visible: bool template: string/{} .subscribe(function(v) {}, trg1​?,​ event​2?​ )​ : s "o​ pti​ ons​ " form bindings "t​ emp​ lat​ e" appearance binding .notif​ ySu​ bsc​ rib​ ers​ (c​ urr​ ent​ val​ ue ) option​ sCa​ ption: string name: string nodes: [DOM, …] s.di​ spo​ se() option​ sText: option​ sVa​ lue: data: [] if: bool string string 1 Default to this. foreach: [] as: string option​ sAf​ ter​ Ren​ der: function 2 change (default) or before​ Cha​ nge. afterRender: functi​ on(​ [DOM], context) select​ edO​ pti​ ons​ valueA​ llo​ wUn​ set: ko.obse​ rva​ ble​ (va​ lue) afterAdd: before​ Rem​ ove: 1: [] bool function function () : value (valu​ e) : vm option​ sIn​ clu​ deD​ est​ roy​ edR​ : bool 1 Only for multiple selects. By mwvdlee Published 2nd April, 2015. Sponsored by Readability-Score.com cheatography.com/mwvdlee/ Last updated 22nd September, 2015. Measure your website readability! Page 1 of 2. https://readability-score.com Knockout.js Cheat Sheet by mwvdlee via cheatography.com/2275/cs/3811/ Context variables $root : vm $compo​ nent : vm $parent : vm $paren​ ts[​ in​ dex] : vm $data : vm $rawData : vm $element : DOM $index1 : integer $compo​ nen​ tTe​ mpl​ ate​ Nodes : DOM array $context : context $parentContext : context 1 Only available in foreach loops. Writable ko.comp​ ute​ d(…) this.value = ko.observable(); this.do​ uble = ko.pure​ Com​ put​ ed({ ​ r​ ead: function () { return this.value * 2; }, ​ ​ ​ ​ write: function(v) { this.value(v / 2); }, ​ o​ wner: this?​ }); Builtin extenders .extend({ rateLimit: { timeout: millis​ eco​ nds, method: method​ 1​? } }) .extend({ notify: 'always' }); 1 notify​ AtF​ ixe​ dRa​ te/​n​ oti​ fyW​ hen​ Cha​ nge​ sStop Custom extenders ko.extenders.log = function(target, option) { ​ ​ ​ t​ arg​ et.sub​ scr​ ibe​ (fu​ nct​ ion​ (ne​ wVa​ lue) { ​ ​ ​ ​ ​ ​ c​ ons​ ole​ .lo​ g(o​ ption + ": " + newValue); ​ ​ ​ }); ​ ​ ​ r​ eturn target; }; By mwvdlee Published 2nd April, 2015. Sponsored by Readability-Score.com cheatography.com/mwvdlee/ Last updated 22nd September, 2015. Measure your website readability! Page 2 of 2. https://readability-score.com.