Knockout js
Download as PPTX, PDF1 like509 views
KnockoutJS is a JavaScript library that provides declarative bindings between a data model and UI. It exposes the MVVM pattern, separating model, view, and view model concerns. Two-way data binding automatically synchronizes data between the model and view. Observables notify of changes and detect dependencies, enabling two-way binding between UI elements and the JavaScript view model. KnockoutJS is lightweight, fully documented, and suitable for building small to medium single-page applications.
Knockout js
- 1. KnockoutJS
- 2. Key features • Declarative bindings • Automatic UI refresh • Dependency tracking • Templating • Free • Pure JavaScript with no dependencies • Small (54 kb minified) • Fully documented
- 3. In 2 words • Provides easy way to link data model and UI by exposing MVVM pattern
- 4. MVVM • Model-View-ViewModel • It’s a pattern • It’s all about separation of concerns • In our case: – Model – represents the data – View – HTML presentation layer – ViewModel – Holds the behavior and data for the view
- 5. How modelis linkedto the UI and vice versa? • 2 way data binding
- 6. What is2 way databinding? • It’s a kind of magic • It’s real fun • It’s automatic way of synchronization of data between model and view
- 7. One way data binding
- 9. Let’s takea lookat example http://jsfiddle.net/Lo1xecse/
- 10. How 2 way data binding isachieved? • Observables – are special JS objects that can notify of changes and can detect dependencies
- 11. What observablesareprovided? • Observable • Computed • ObservableArray
- 15. Controlflow bindings • foreach – iterates through collection • if • ifnot • with – changes context
- 16. Bindingcontext • $root – root VM • $parent – parent VM • $data – current VM • $index – current index in foreach
- 17. Interactivebindings • click – calls VM method when model is clicked • value – form element value • enable – enabling disabling element • event – calls specified event when occurs • And many others…
- 18. Templates • By default inline http://jsfiddle.net/Lo1xecse/4/ • But still can be injected http://jsfiddle.net/Lo1xecse/5/
- 19. Custombindings • Allows to create your own bindings and link them to elements • Add to ko.bindingHandlers your own object and use it in markup • http://jsfiddle.net/Lo1xecse/6/
- 20. DevelopingSPA • Perfectly suits for small or medium level applications • Does not have routing so it needs to be added by yourself (sammy) • Does not have ability to load dynamically templates (can be easily implemented)
- 21. Pros • Free • Lightweight • Data binding is awesome • Very small learning curve • Perfectly suits for small to medium level SPA
- 22. What’s next? Let’s create sample application. User management page (CRUD) With JQuery, RequireJS, Knockout
- 23. Homework • Pass knockout tutorial • Implement users app with knockout