Magento 2 is heavily using Knockout Js on frontend. You can find  Knockout in Magento 2 on almost every page.
For example in : on minicart vendor\magento\module-checkout\view\frontend\templates\cart\minicart.phtml

To understand how it works, I created a simple module Magento 2 Knockout Js Simple Module  to explain it.
You can download it and check te result of this tutorial on github. :

Magento2-Knockout-JS-Simple-Module

 

Knockout_js_demo

This module allows us to add/remove seat reservation and calculate total charge dynamically using Knockout JS.
You can follow my instruction on github Readme file for installing this module.
Access it via http://your_locahost/knockout/index/view

 

1/ Introduce 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. It implements Model-View-View Model (MVVM) design pattern.
If you’re not familiar with Knockout Js. You can look at : Knockout site .

So, in quick conclusion, KO provides a client side JS abstraction that enhances your stock JavaScript library in the following ways:

1. Greatly simplifies synchronization between the client UI and server.
2. Leverages MVVM design pattern to increase modularity and provide for a clean separation of concerns and cohesive implementations.
3. Keeps UI model state management on the client (where it belongs).
4. Decreases (potentially) the size of server responses and client/server traffic in general (thereby speeding up our apps).

 

2/ How Knockout Js simple module works:

2.1/ My simple module create a new route : knockout/index/view to load a custom template  Grid.phtml: 

(app\code\Thienphucvx\Knockout\view\frontend\templates\grid.phtml)
In file :   app\code\Thienphucvx\Knockout\view\frontend\layout\knockout_index_view.xml

Here is the  content of Grid.phtml:

2.2/ In grid.phtml, it will load js\view\grid.js file based on  knockout_index_view.xml and get right template based on grid.js configuration.
As you can see we set “data-bind=”scope:’sample-grid’“.  The row “$block->getJsLayout()” => will read configuration from knockout_index_view.xml

Based on this configuration “<item name=”component” xsi:type=”string”>Thienphucvx_Knockout/js/view/grid</item>“, it will render like this :
“Magento_Ui/js/core/app”: {“components”:{“sample-grid”:{“component”:”Thienphucvx_Knockout\/js\/view\/grid”}}}
=>
It will load “app\code\Thienphucvx\Knockout\view\frontend\web\js\view\grid.js” for component : “sample-grid“.

In “view\frontend\web\js\view\grid.js”: We set default template via this line code
“defaults: {
template: ‘Thienphucvx_Knockout/grid’},”
It means we tell magento 2 that virtual element “<!– ko template: getTemplate() –><!– /ko –>” to load “view\frontend\web\template\grid.html” for displaying content of scope component “sample-grid“.

Summary explain how Knockout Js Module Works

Explain how Knockout Js Module Works
Finally grid.html will be loaded :

I believe from that point, you can dig into grid.html to understand how my module works. If you have trouble on understand what is “$parent”, you can read it at here : http://knockoutjs.com/documentation/binding-context.html

Magento 2 use “scope” to binding View-model instead of applying via “ko.applyBindings(new AppViewModel())” as normal Knockout. You can read Alan article to know more about it  http://alanstorm.com/magento_2_knockoutjs_integration

 

Some more resources about Knockout JS on Magento2:
http://www.ibnab.com/en/blog/magento-2/magento-2-ui-knockoutjs-using-container-less-ko-template-gettemplate

http://learn.knockoutjs.com/
http://alanstorm.com/knockoutjs_primer_for_magento_developers

http://magento.stackexchange.com/questions/89492/magento2-knockoutjs-custom-template-binding