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()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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
