1.Knockout JS Basics & Beyond

2. Why? Oh Why? I HATE JavaScript At least in the first ~10 years of existence Then came jQuery in '06 Which helped for the next ~5-7 years Then came Knockout JS (and html5) 3. Demo: Why Plain JavaScript Sucks http://jsfiddle.net/Cine/9Kk3R/ 4. Who am I Dennis Haney Master in Computer Science from the Copenhagen University of Computer Science DIKU (Denmark) Been in Vietnam since 2006 15+ years programming professionally 5. What does KO fix? HTML is back in control of layout JavaScript is a helper, not the leader Declarative binding TemplatingWhen I update X... Then value displayed is also updated Dependency tracking Bi-directional data binding 6. Demo: What Does KnockoutJS Fix http://jsfiddle.net/Cine/n2W6w/1/ 7. Data-Binding data-bind attributes in HTML Declarative binding Templatingobservable for the properties Dependency tracking Bi-directional data bindingko.applyBindings() to activate bindings 8. Presentation Patterns 9. SimplifiedJS ViewModelHTML View 10. Demo: Two Way Binding http://jsfiddle.net/Cine/YVUwZ/ 11. 3 kinds of observable v = ko.observable(value) To update do v(new), not v = newa = ko.observableArray([1,2,3]) Feels like native array An observableArray tracks which objects are in the array, not the state of those objectsko.computed(function() { return value; }) Automatic dependency tracking 12. Demo: Observables http://jsfiddle.net/Cine/Fys9C/ 13. Dependency tracking firstNamelastNamefullName 14. Demo: Observables Expanded http://jsfiddle.net/Cine/45GLk/ 15. Bindings Controlling text and appearance The visible binding The text binding The html binding The css binding The style binding The attr bindingControl flow The foreach binding The if binding The ifnot binding The with binding 16. Bindings Working with form fields The click binding The event binding The submit binding The enable binding The disable binding The value binding The hasFocus binding The checked binding The options binding The selectedOptions binding The uniqueName bindingRendering templates The template binding 17. Remember Load jQuery BEFORE KnockoutJS Otherwise events won't work properlyObservables are FUNCTIONS, not plain values Remember both when reading and writing 18. Advanced Knockout 19. Virtual Elements Data-bind does not require an actual element to bind to in some cases (foreach, if etc.) http://jsfiddle.net/Cine/8QMJC/ Very useful if you DON'T want some parent element 20. Validation jQuery validation works well with http://jsfiddle.net/Cine/NxvNh/ Remember to use uniqueName binding jQuery Validation requires validation targets to have unique names 21. Custom bindings Can make new bindings that does whatever you want http://jsfiddle.net/Cine/4JZsA/ 22. Extenders Expand how a observable works http://jsfiddle.net/Cine/7nJRQ/2/ Can use as log, trigger, enforcer or anything else you can come up with Only 1 built-in extender: throttle 23. Value converters Computed observables support write http://jsfiddle.net/Cine/2r2x4/ Can use as Value Converter, complex validation or as in the example a simple decomposition into multiple other fields 24. Questions? Dennis Haney davh@davh.dkhttp://knockoutjs.com/documentation/introduction.html 25. About us Author: Dennis Haney Find me at: davh@davh.dk Presentation made for JavaScript HCMC Meetup You can find us at: http://www.meetup.com/JavaScript-Ho-Chi-Minh-City/ https://www.facebook.com/JavaScriptHCMC?ref=hl https://plus.google.com/communities/116105314977285194967