Download - KnockoutJS: Web Dev Bliss
![Page 1: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/1.jpg)
KnockoutJSData-bind your way to dynamic HTML UIs with clean, maintainable code
![Page 2: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/2.jpg)
Le Knockout?
It gives structure to your JS code!
And it’s easy!
It’s data-binding for your HTML!
![Page 3: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/3.jpg)
And, fine sir, what problems does it
solve?
DOM manipulation
Event handler soup
![Page 4: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/4.jpg)
Mmmm hmmmm. Go on…
Knockout is awesome! Blah blah derp…
Declarative bindingsAutomatic UI refresh
Dependency tracking
Data templates
![Page 5: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/5.jpg)
Cereal-eatin’ man says, show me the
codez!
knockout.GetToWork()
![Page 6: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/6.jpg)
Let’s try out Declarative Bindings
![Page 7: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/7.jpg)
Data binding is easy!
Derp! Yeah, so easy; it’s just the data-bind attribute
![Page 8: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/8.jpg)
Let’s try out Automatic UI
Refresh
![Page 9: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/9.jpg)
Automatic UI refresh is easy, too!
Oh, yeah, blah blah it’s just the ko.observable thingy!
![Page 10: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/10.jpg)
Let’s try out Dependency Tracking
![Page 11: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/11.jpg)
Dependency tracking is the derp!
You see, my dear, ko.dependentObservable lets you setup complex UI relationships and dependencies with ease.
![Page 12: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/12.jpg)
Let’s try out Templating
![Page 13: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/13.jpg)
Herp ‘a derp, templating is so
simple!
The template binding lets you to render UI for model data!
![Page 14: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/14.jpg)
Demos look good…but does it work
in the real world?
![Page 15: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/15.jpg)
1. Data binding
2. Auto UI Refresh
3. Dependency tracking
4. Data templates
RECAP
![Page 16: KnockoutJS: Web Dev Bliss](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54954770b479598d538b491c/html5/thumbnails/16.jpg)
Thank you!(Hope this has helped!)
Try KnockoutJS for yourself, right in your web browser:
learn.knockoutjs.com