Magento 2: How Knockout-es5 Library Work

Hello Magento Friends,

We are back with “How-To” Magento Tutorials. Today’s topic is Magento 2: How Knockout-es5 Library Work.

Knockout-es5 is a plugin by Steve Sanderson to simplify the syntax. The knockout-es5 plugin adds support for ECMAScript 5 properties. With knockout-es5 you can use simpler syntax with your code and bindings. Knockout-ES5 works in ECMAScript 5-capable browsers.

Magento 2 provides a knockout js library to make our variable observable. Along with that one advanced functionality is given like knockout-es5, using it we can make all variables observable in bulk using the tracking method.

Observable is helpful to fulfill MVVM (Model-View-View-Model) architecture.

How Knockout-es5 Library Work in Magento 2

Let us take an example,

ko.observable(varMyName)

Further, to access the value, it is necessary to call it like a function: varMyName()

UiElement = requirejs('uiElement');

//define a new constructor function based on uiElement
OurClass = UiElement.extend({
    defaults:{
        tracks:{
            varMyName: true,
            varTempMyName: true
        }
    }
});    

//create a new object
ourViewModel = new OurClass;

//set a default value
ourViewModel.varMyName = 'a default value';

//setup a callback
ourViewModel.on('varMyName', function(value){
    console.log("Another callback: " + value);
});

//set the value (notice the normal javascript assignment)
//and you should see the "Another callback" output
ourViewModel. varMyName = 'a new value';

So here varMyName automatically works like observable

Conclusion:

Hence, this was all about How Knockout-es5 Library Work in Magento 2. For any queries or help feel comfortable reaching me via the comment part. Do not forget to share the article. Stay informed!

Happy Coding