Magento 2 – Use of Knockout.js

knockoutjsmagento-2.1magento2

I am new to Magento 2. Need help to understand the concept of the knockout.js.

Why Magento 2 has used knockout.js? I did try to understand it and did check this useful articles:

But still not getting anyhint why it has been implemented in Magento and what's the use of it?

Please help me to understand the concept of the knockout.js.

Best Answer

Magento 2 uses the Knockout.js framework to dynamically build some parts of it's frontend. It provides a great way to create interactive frontend data bound components within your Magento 2 store. Knockout.js eases working with dynamic javascript user interfaces by making use of the Model-View-ViewModel (MVVM) pattern.

Features of Knockout.js

Observables and dependency tracking
Declarative bindings
Templating

Observables means that you define data models in javascript that you pick for example via ajax. You than 'connect' these models with elements in a template. Does anything change in your data model than the user interface is updated automatically. This can also work the other way around. With dependency tracking we can setup chains of relationships between model and data, to transform and combine it.

With declarative binding, we can manipulate more properties of the UI instead of just showing values. Depending on our data model we can change visibility, text, html, css, styles, attributes, ...

Over at learn.knockoutjs.com they have a real nice web app set up that takes you through the basics of using Knockout.js in a 'hands-on' style. It's really fun to work through.

Knockout.js is very similar to Angularjs. But Angularjs is a very complete and large framework with dependency injection, ajax, routing, cookies and much more ... Probably Magento 2 was just looking only for a way to do data-binding.

An example of customizing the minicart

If you want to write html template structures in Magento that work with Knockout.js you have to deal with regular .html files in addition to the traditional .phtml files. These templates are loaded via ajax. You can usually find these files in app/code///view/frontend/web/template/

or in

app/design/frontend/<theme-vendor>/<theme>/<module-vendor>_<module>/web/template/.

So they are inside the template folder inside the web folder and not in the regular templates folder.

To modify the minicart we must copy the file app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html to our theme folder. So we copy the file to app/design/frontend/<your-theme-vendor>/<your-theme>/Magento_Checkout/web/template/minicart/content.html

Inside this template file we can use al sorts of code structures like an 'if' structure for example. Say we want to hide elements when the cart is empty, we can add the following around a code block.

<!-- ko if: cart().summary_count == 0 -->
    <div>some code</div>
<!-- /ko -->

Using the syntax with comments like this is called 'containerless control flow syntax'. We could also bind this to the container itself of course. Like so:

<div data-bind="if: cart().summary_count == 0">some code</div>

Similar to the if binding there is also the foreach binding.

<!-- ko foreach: someArray --><!-- /ko -->

We can also add text that can be translated.

<span class="notice"><!-- ko i18n: 'All prices are tax included.' --><!-- /ko --></span>

Calling another template can be done with the template binding.

<!-- ko template: 'path/to/template' --><!-- /ko -->

The part that initially loads the content form the minicart in the header comes from a regular .phtml file, that can be found app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml Here we also see some knockout.js bindings.

For instance we can change the code that shows the counter next to the cart icon from:

<!-- ko if: cart().summary_count -->
    <!-- ko text: cart().summary_count --><!-- /ko -->
    <!-- ko i18n: 'items' --><!-- /ko -->
<!-- /ko -->

to:

<!-- ko if: cart().summary_count == 1 -->
    <!-- ko i18n: 'item' --><!-- /ko -->
<!-- /ko -->
<!-- ko if: cart().summary_count != 1 -->
    <!-- ko i18n: 'items' --><!-- /ko -->
<!-- /ko -->

Now the counter also shows up when there are actually zero items in the cart. And it shows '0 items'.

Source: studioemma

Related Solutions

Magento 2 – What is Dependency Injection

Inside a project, classes interact with each other.
So we can say, a class depends on other classes.
And there are 2 ways the connection can be made.

The class locates its dependencies.
The dependencies are provided to the class.

Magento 1 takes the first approach. Here is a random example. In this example, the category model depends on the url rewrites instance. So it instantiates it.

Magento 2 takes the second approach.

When building a class, all the dependencies are specified in the constructor.
When used, the class is instantiated via a factory method that reads the signature of the class constructor, to check what dependencies are required.

Magento 2 also has a dependency injection container (DIC) which is basically a big array with the classes that get instantiated.
When trying to instantiate a class, it checks if it's dependencies are already present in the DIC.
If they are, they are provided to the constructor, if not, the dependency class is instantiated in the same way as the current class you are trying to instantiate.

This is it in a nutshell. In practice is a bit more complicated because configuration files are involved also (di.xml), some dependencies might be interfaces which cannot be instantiated, but this factory method supplies a class that implements that interface when your class gets instantiated, based on the contents of the same di.xml file.
Also some dependencies are not objects. They can be arrays, string, ... They are supplied to the class via the same di.xml file.

If you want to dig and see how it actually happens, you can start from this class https://github.com/magento/magento2/blob/develop/lib/internal/Magento/Framework/ObjectManager/Factory/Dynamic/Developer.php.
But it's not an easy thing to follow. You need some patience.

Magento – what is the use of core registry in magento 2

Core registry is used to store global variable. You can store global variables via register() method and fetch value of variables via registry() method.

In Magento 1, it was possible to register a global variable with the static registry method.

Mage::register('some_var', 'some value');
var_dump(Mage::registry('some_var'));

Many extensions, include core Magento extensions, ended up using this from controller action methods to pass variables into the views.

While its future is uncertain (not marked explicitly supported via an @api, but not marked @deprecated) Magento 2 does have a similar registry object that should help easy the transition for extensions. The class is Magento\Framework\Registry, and you can inject it in any constructor.

public function __construct(
    ... 
    \Magento\Framework\Registry $registry,
    ...
) {
    ...
    $this->registry     = $registry;
    ...
}

and then set variables with

$this->registry->register('test_var', 'this is a test!');

and fetch those variables back (even from a different object – Magento\Framework\Registry is a shared/singleton object)

echo $this->registry->registry('test_var');

Source: magento-quickies.alanstorm

Best Answer

Related Solutions

Magento 2 – What is Dependency Injection

Magento – what is the use of core registry in magento 2

Related Topic