Introduction to Knockout Js
1 like1,884 views
This document introduces Knockout.js, a JavaScript library that utilizes the Model-View-ViewModel (MVVM) pattern for creating responsive user interfaces with two-way data binding. It highlights key features such as declarative bindings, automatic UI refresh, and dependency tracking, alongside the benefits of its small size, compatibility, and extensive documentation. Additionally, the document provides examples of creating view models and observables, along with instructions for using various knockout bindings.
Introduction to Knockout Js
- 1. Introduction to Knockout JsIntroduction to Knockout Js Teena Vashist Software Consultant Knoldus Software LLP Teena Vashist Software Consultant Knoldus Software LLP
- 2. AGENDAAGENDA What is knockout js MVVM Features Why knockout js Observable Controlling dependency tracking Bindings Demo What is knockout js MVVM Features Why knockout js Observable Controlling dependency tracking Bindings Demo
- 3. What is Knockout Js ● Knockout is a JavaScript library that helps you to create responsive display(UI) ● It is based on Model–view–viewmodel (MVVM) pattern ● It provides a simple two-way data binding mechanism between your data model and UI ● It was developed and is maintained as an open source project by Steve Sanderson, a Microsoft employee on July 5, 2010
- 4. MVVM Design Pattern MVVM pattern has 3 key parts: ● Model – It stores application data and is independent of any UI ● View – It provides User Interface ● View-Model – It connect model and view and a pure-code representation of the data and operations on a UI
- 5. MVVM
- 6. Features ● Declarative Bindings It allows you to connect your UI element to your data model ● Automatic UI Refresh When your data model's state changes, your UI updates automatically ● Dependency Tracking Implicitly set up chains of relationships between model data, to transform and combine it ● Extensible This implements custom behaviors as new declarative bindings for easy reuse in just a few lines of code. Knockout is also flexible to integrate with other libraries and technologies
- 7. Why Knockout Js ? ● Small & lightweight - 54kb minified ● Compatible with other technologies ● Open source and free ● Smart feature - self updating UI ● Fully documented ● It supports all mainstream browsers: IE 6+, Firefox 2+, Chrome, Safari, others
- 8. To create a view model with KO Just declare any JavaScript object, For example var employeeViewModel = { empName: 'Teena', empId: '12' }; ViewModel holds the UI's underlying data and behaviors
- 9. ViewModel inside a View You can then create a very simple view of this view model using a declarative binding. Name is <span data-bind="text: empName"></span> Binding attribute DOM element with model properties
- 10. Activating Knockout Js ko.applyBindings(employeeViewModel); Here, view will display like you would have written following html Name is <span>Teena</span> Activate Knockout
- 11. Observables These are special JavaScript objects that can notify subscribers about changes, and can automatically detect dependencies. Rewrite the preceding view model object as follows: var employeeViewModel = { empName: ko.observable('abc'), empId: ko.observable(49) };
- 12. Read/Write Properties of Observable ● To read: employeeViewModel.empName() ● To write: employeeViewModel.empName('Teena') ● To write value to multiple observable: employeeViewModel.empName('bob').empId('15')
- 13. Computed Observable Computed observable are functions that are dependent on one or more other observables and will automatically update whenever any of these dependencies change. var empDetail = ko.computed(function() { return employeeViewModel.empName() + " employee id: " + employeeViewModel.empId(); });
- 14. Controlling Dependencies ● Knockout’s automatic dependency tracking. But we might sometimes need to control which observables will update your computed observable. var empDetail = ko.computed(function() { return employeeViewModel.empName() + " employee id: " + employeeViewModel.empId.peek(); });
- 15. Knockout Bindings ● Controlling text and appearance: visible, text, html, css, style, attr ● Control flow: foreach, if, ifnot, with ,component ● Working with form fields: click, event, submit, enable, disable, value, textInput etc.
- 16. Demo https://github.com/knoldus/play-knockout-demo
- 17. Questions ?
- 18. References ● http://knockoutjs.com/ ● http://www.knockmeout.net/ ● https://msdn.microsoft.com/