knockoutJs Binding Observables & Magento2

As Magento2 has been introduced with loads of new tech stacks , knockoutjs is one of those stacks . Magento2 uses ko (we will use ko as knockout) at admin and front end as well specially with their magento2 ui framework .

KnockoutJS is an open source JavaScript library. It was built to allow you to create
dynamic and rich web applications. It is built with the Model-View-ViewModel
(MVVM) pattern.Ko contains mainly Three aspect

• Model
• View
• View Model

Its kind of MVC where model and view are similar view model is new concept . Will explain what is view model with an example

 

as explained in above tutorial , A ViewModel can be any type of JavaScript variable / function .

ko.applyBindings is  to perform the data binding of the view and the View‐
Model. This is accomplished by calling the ko.applyBindings function with a View‐
Model.

When this function is executed, Knockout processes both the view and the
ViewModel. All data bindings in the view are executed and dynamically replaced with
the data from the ViewModel.

HTML bindings with knockoutjs

Knockout is also capable of binding html as well as described in the below example