Understanding Knockout JS: A Powerful JavaScript Library for Dynamic UIs
Knockout JS is a JavaScript library developed by Steve Sanderson that facilitates the creation of dynamic and responsive user interfaces. It is based on the MVVM design pattern, which separates the data model, view model, and view to enhance maintainability and reduce errors. The library's observables and computed features enable automatic updating of UI elements based on data changes, making it a valuable tool for web developers.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Another look at Knockout JS By Peter Messenger Senior Developer Triple Point Technology http://www.petermessenger.com
What is Knockout JS? 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 (e.g., changing depending on the user s actions or when an external data source changes), KO can help you implement it more simply and maintainably.
Knockout JS - Site Developed originally by Steve Sanderson http://blog.stevensanderson.com/about/ Microsoft employee, working in England Open Source Framework Available on Github, Nuget In active development, currently version 3.0 More Information on http://knockoutjs.com/
Simple Example Javascript: var myViewModel = {firstName: Peter', lastName: Messenger }; Html : The name is <span data-bind="text: firstName"></span> Javascript : ko.applyBindings(myViewModel); Result: The name is <span>Peter</span>
Why is this important? Based on the MVVM design pattern MVVM stands for Model, View, ViewModel A model: your application s stored data. A view model: a pure-code representation of the data and operations on a UI A view: a visible, interactive UI representing the state of the view model. Keeps the logic and presentation layer separated Much easier to maintain, less prone to error
Extending Example - Observables Javascript: var myViewModel = {firstName: ko.observable( Peter ), lastName: ko.observable( Messenger )}; Result: Exactly the same as before, but . If personName changes for any reason, the display will automatically change. Extending myViewModel.firstName.subscribe(function(newValue) { alert("The person's new name is " + newValue); });
Extending Example - Computed Javascript: function Person(firstName,lastName) { this.firstName = ko.observable(firstName); this.lastName = ko.observable(lastName); this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this); } var myViewModel = Person( Peter , Messenger ); Result: Exactly the same as before, but . Can bind to fullName, and this will change, if first name or last name change
Extending Examples - Arrays Javascript: var myViewModel = {people : ko.observableArray()}; myViewModel.people.push(Person( Peter , Messenger )); myViewModel.people.push(Person( John , Smith )); myViewModel.people.push(Person( Sarah , Parker )); Html: <table> <thead> <tr><th>First name</th><th>Last name</th></tr> </thead> <tbody data-bind="foreach: people"> <tr> <td data-bind="text: firstName"></td> <td data-bind="text: lastName"></td> </tr> </tbody> </table>
Extending Example - Actions Javascript: function PeopleModel() { var self = this; self.people = ko.observableArray([ Person( Peter , Messenger ), Person( John , Smith ), Person( Sarah , Parker ) ]); self.addPerson = function() { self.people.push(Person( New Guy ,"New at " + new Date())); }; self.removePerson = function() { self.people.remove(this); } }
Extending Example Actions (cont) Html: <h4>People</h4> <ul data-bind="foreach: people"> <li> Name at position <span data-bind="text: $index"> </span>: <span data-bind="text: name"> </span> <a href="#" data-bind="click: $parent.removePerson">Remove</a> </li> </ul> <button data-bind="click: addPerson">Add</button> Example Here $index is used to mark the position in the array $parent allows it to jump back a level, $parent can be nested $parent[2] is parent of parent http://knockoutjs.com/documentation/foreach-binding.html
Existing Bindings Text and appearance Visible, text, html, css, style, attr Control flow Foreach, if, ifnot, with Forms Click, Event, Submit, Enable, Disable, HasFocus, Checked, Options, SelectedOptions
Building your own bindings Javascript ko.bindingHandlers.yourBindingName = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called when the binding is first applied to an element // Set up any initial state, event handlers, etc. here }, update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called once when the binding is first applied to an element, // and again whenever the associated observable changes value. // Update the DOM element based on the supplied values here. } }; Html <div data-bind="yourBindingName: someValue"> </div>
Wiring up to services (Jquery) Get $.getJSON("/some/url", function(data) { }) Post var data = /* Your data in JSON format - see below */; $.post("/some/url", data, function(returnedData) { // This callback is executed if the post was successful }) Converting var jsonData = ko.toJSON(viewModel);
More documentation There is extensive documentation on the main site Interactive tutorials Live examples Forum Easy to integrate with JSON based services As the popularity of knockout has increased, many o the javascript UI frameworks have added knockout extensions.
Added in Version 3.0 Clearer error reporting Custom binding, now extensible Bindings now independent and only refresh when needed Computed variables now only notify when they are changed Performance and bug fixes
Integration Other Frameworks Kendo UI (Telerik) http://rniemeyer.github.io/knockout-kendo/ JQuery UI http://gvas.github.io/knockout-jqueryui/index.html jqWidgets http://www.jqwidgets.com/ Wijmo (Component One) http://wijmo.com/demo/explore/?widget=Knockout& sample=Overview
jQuery UI Examples http://gvas.github.io/knockout-jqueryui/index.html Accordion AutoComplete Button Dialog Menu
Why do I like it? Once you get the hang of it, it is quite easy and nice to use and debuggable Can develop single page websites that are fast and responsive Very lean, much less post back bloat than MVC Can have html/javascript separate, easier to style with css
A full website based on Knockout JS https://www.petermessenger.com/Exercises.aspx
Important Links? Presentation slides on my website and blog http://www.petermessenger.com Main Site: http://knockoutjs.com/ Good Reference Site: http://www.knockmeout.net/
