Knockout.Js Cheat Sheet by Mwvdlee Via Cheatography.Com/2275/Cs/3811
Total Page:16
File Type:pdf, Size:1020Kb
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?, event2? ) : 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.