Knockout Js Introduction

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.

The main benefits of knockout js:

-Free, open source (MIT license)
-Pure JavaScript — works with any web framework
-Small & lightweight — 66kb minified
-No dependencies
-Supports all mainstream browsers, even ancient ones
IE 6+, Firefox 3.5+, Chrome, Opera, Safari (desktop/mobile)

Installation

Simply reference the JavaScript file using a <script> tag somewhere on your HTML pages. For example:

<script type='text/javascript' src='knockout-3.5.1.js'></script>

Of course, update the src attribute to match the location where you put the downloaded file. Or you can use the knockout source file directly from a content delivery network.

Creating view models with observables

Model-View-View Model (MVVM) is a design pattern for building user interfaces. It describes how you can keep a potentially sophisticated UI simple by splitting it into three parts:

a) a model typically from your business domain,
b) a view model which is pure-code representation of the data and operations on a UI, and
c) a view: a visible, interactive UI representing the state of the view model. It displays information from the view model, sends commands to the view model (e.g., when the user clicks buttons), and updates whenever the state of the view model changes.

To create a view model with KO, just declare any JavaScript object. For example:

var myViewModel = {
personName: 'Bob',
personAge: 123
};

You can then create a very simple view of this view model using a declarative binding. For example, the following markup displays the personName value:

The name is <span data-bind="text: personName">

Activating Knockout

To activate Knockout, add the following line to a <script> block:

ko.applyBindings(myViewModel);

You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery’s $ function.

Observables

One of the key benefits of KO is that it updates your UI automatically when the view model changes. You need to declare your model properties as observables, because these are special JavaScript objects that can notify subscribers about changes

var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};

Reading and writing observables

Not all browsers support JavaScript getters and setters, so for compatibility, ko.observable objects are actually functions.

To read the observable’s current value, just call the observable with no parameters. In this example, myViewModel.personName() will return 'Bob', and myViewModel.personAge() will return 123.

To write a new value to the observable, call the observable and pass the new value as a parameter. For example, calling myViewModel.personName('Mary') will change the name value to 'Mary'.

Conclusion

This is a short introduction to the principles how knockout is working in the simplest scenario. We don't describe here more advanced scenarios.

Knockout is all about simplifying client side javascript development to create dynamic and interactive websites.

01.02.2020