DEV Community

Paboda Hettiarachchi
Paboda Hettiarachchi

Posted on • Edited on

Knockout - Magento 2

#magento2

I always found it difficult when it comes to a JS implementation in Magento 2. Reasons geing not experienced in Knockout JS scope and had a general fear and confusion in ES6/jQuery/Knockout combined together.

I'm trying to break the barrier here as I needed to be perfectly clear on the concepts.

As inline script is not the proper standards, we normally have a phtml and a js file included. In some cases we need to use html file as well.

exampleone

exampleone.phtml

<div id="one"><?= "TESTING" ?></div> <script type="text/x-magento-init"> { "#one": { "Paboda_LearnKo/js/exampleone":{} } } </script>
Enter fullscreen mode Exit fullscreen mode

exampleone.js

define([], function(){ var mageJsComponent = function() { console.log('hello...'); }; return mageJsComponent; });
Enter fullscreen mode Exit fullscreen mode

As using script tags in phtml is not considered, data-mage-init should be used in the html instead

<div id="one" data-mage-init='{"Paboda_LearnKo/js/exampleone": {}}'><?= "TESTING" ?></div>
Enter fullscreen mode Exit fullscreen mode

exampletwo - data-bind with scope

exampletwo.phtml

<div data-bind="scope: 'text-binding'"> <div><?= "Scope Binding" ?></div> <div id="main"> <h1 data-bind="text: sayHello"></h1> </div> </div> <script type="text/x-magento-init"> { "*": { "Magento_Ui/js/core/app": { "components": { "text-binding": { "component": "Paboda_LearnKo/js/exampletwo" } } } } } </script>
Enter fullscreen mode Exit fullscreen mode

exampletwo.js

define([ 'uiComponent' ], function(Component) { return Component.extend({ initialize: function () { this._super(); this.sayHello = "This is the binding text from KO..."; }, }); });
Enter fullscreen mode Exit fullscreen mode

examplethree - data-bind with scope in html template

examplethree.phtml

<div data-bind="scope: 'text-binding'"> <div><?= "Scope Binding" ?></div> <!-- ko template: getTemplate() --><!-- /ko --> </div> <script type="text/x-magento-init"> { "*": { "Magento_Ui/js/core/app": { "components": { "text-binding": { "component": "Paboda_LearnKo/js/examplethree", "template" : "Paboda_LearnKo/examplethree" } } } } } </script>
Enter fullscreen mode Exit fullscreen mode

examplethree.js

define([ 'uiComponent' ], function(Component) { return Component.extend({ initialize: function () { this._super(); this.sayHelloFromTemplate = "This is the binding text from KO template..."; }, }); });
Enter fullscreen mode Exit fullscreen mode

examplethree.html

<div id="main"> <h1 data-bind="text: sayHelloFromTemplate"></h1> </div>
Enter fullscreen mode Exit fullscreen mode

examplefour - show html as in data-bind but with data-mage-config

examplefour.phtml

<div id="countdown" data-mage-init='{"Paboda_LearnKo/js/example4": {}}'></div>
Enter fullscreen mode Exit fullscreen mode

examplefour.js

define([ 'jquery', 'Magento_Ui/js/lib/core/storage/local' ], function ($, storage) { 'use strict'; return function (config, element) { let showHtml = function () { $(element).html( "test" ); } showHtml(); }; });
Enter fullscreen mode Exit fullscreen mode

Top comments (0)