1 / 16

Intro to KnockoutJS

Forward Thinking. Intro to KnockoutJS. About. Steve Duitsman @ SteveDuitsman https://github.com/SteveDuitsman/MVVM_Examples steve.duitsman@centare.com. KnockoutJS. Client-Side MVVM JavaScript Library 40kb (minified), 166kb (debug) No dependencies Works on all mainstream browsers

derick
Download Presentation

Intro to KnockoutJS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Forward Thinking Intro to KnockoutJS fast. forward. thinking.

  2. About • Steve Duitsman • @SteveDuitsman • https://github.com/SteveDuitsman/MVVM_Examples • steve.duitsman@centare.com fast. forward. thinking.

  3. KnockoutJS • Client-Side MVVM JavaScript Library • 40kb (minified), 166kb (debug) • No dependencies • Works on all mainstream browsers IE6+, FF2+, Chrome, Safari, Opera • Developed with BDD • NuGet or knockoutjs.com fast. forward. thinking.

  4. MVVM Pattern MODEL VIEW MODEL VIEW fast. forward. thinking.

  5. Dependency Tracking Knockout Features Declarative Bindings Automatic UI Refresh Templating fast. forward. thinking.

  6. Demo fast. forward. thinking.

  7. Basics • jQuery Example • data-bind attributes • ko.observable() • ko.applyBindings() • Debug Text fast. forward. thinking.

  8. Basics • var self = this; • ko.computed() • Dependency Tracking • visible binding fast. forward. thinking.

  9. Custom Bindings • ko.bindingHandlers • init and update events • element • valueAccessor • allBindings • viewModel • bindingContext fast. forward. thinking.

  10. Advanced • ko.observableArray • ko.mapping • ko.utils • Control Flow Bindings foreach if with • Containerless Syntax fast. forward. thinking.

  11. Advanced • Binding Contexts $root $parent $parents $parents[0] == $parent $parent[1] … $parent[n] $data fast. forward. thinking.

  12. Templates & Saving Data • Templates in Knockout • ko.toJSON fast. forward. thinking.

  13. Why Knockout? fast. forward. thinking.

  14. Why Knockout • High level link between UI & data model • Extensible • Usable in existing apps/architecture • Learning Resources • Same MV* pattern & benefits as other solutions • It boils down to • Scope & Feel fast. forward. thinking.

  15. Resources • knockoutjs.com Live Examples/Tutorials Documentation • Knock Me Out - Ryan Niemeyer’s blog • PluralSight Courses Knockout Fundamentals HTML5 and JS Apps With MVVM and Knockout SPAs with HTML5, WebAPI, Knockout and jQuery fast. forward. thinking.

  16. Questions fast. forward. thinking.

More Related