An introduction to knockout.js
8 likes5,191 views
Knockout.js is a JavaScript library that helps create rich, responsive user interfaces with a clean underlying data model. It allows for declarative data binding between view models and HTML, automatic UI refresh when view models change, and templating capabilities. Key features include declarative binding, automatic UI refresh, templating, and dependency tracking. The library uses observables to track changes to view model properties and update the UI accordingly.
![What is Knockoutjs?
“Knockout is a JavaScript library that helps you
to create rich, responsive display and editor user
interfaces with a clean underlying data model.
Any time you have sections of UI that update
dynamically [...], KO can help you implement it
more simply and maintainably.”
http://knockoutjs.com](https://image.slidesharecdn.com/slides-130516145117-phpapp01/85/An-introduction-to-knockout-js-13-320.jpg)
An introduction to knockout.js
- 1. An introduction to Knockout.js Emanuele Delbono @emadb
- 2. Everyone loves jumping in muddy puddles
- 3. Everyone loves jumping in muddy puddles writing javascript code
- 4. We write tons of javascript code
- 5. I am Web Developer in CodicePlastico. I have fun writing web apps in C#, Javascript and Ruby.
- 6. Agenda • The MVVM Pattern • Welcome to Knockout • Binding basics • The features • Conclusions
- 8. The MVVM pattern Model ViewModel View
- 13. What is Knockoutjs? “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically [...], KO can help you implement it more simply and maintainably.” http://knockoutjs.com
- 14. Key features • Declarative binding • Automatic UI refresh • Templating • Dependency tracking
- 16. Binding • data-bind attributes in HTML • ko.observable() for the properties • ko.applyBindings() to activate bindings
- 17. Binding var viewModel = { message: ko.observable('Welcome') } <div data-bind="text: message"></div>
- 18. Observable is a function! Don’t do this: viewModel.message = 'hi' Do this: viewModel.message('hi')
- 19. Code time
- 20. Recap • Simple binding • Array binding • Computed properties • Event binding • Conditionals • Templates • Subscriptions • Messagging • Contexts • Custom bindings • Virtual elements
- 21. Conclusions • KO is small focused on binding • Very low learning curve • Focused on databinding (no routing, model synchronization, etc...) • Lots documentation • Could be hard on big pages