How do you use knockout.js bindings Before I will explore each question in greater detail, it is necessary to explain the Model-View-ViewModel. MVVC consists of 3 components:<\/p>\n With that knowledge in mind, we can proceed to the main part of the article.<\/p>\n Binding is the ability to bind various components to HTML. In knockout.js, the html attribute data-bind is used for this. Here is how the binding is implemented, using the user greeting component on the frontend of Magento 2 as the example:<\/p>\n https:\/\/github.com\/magento\/magento2\/blob\/2.2\/app\/code\/Magento\/Customer\/view\/frontend\/templates\/account\/customer.phtml<\/p>\n If we assume that the value of fullname<\/strong> is observable, then as soon as the value of fullname<\/strong> changes, this value changes correspondingly on the website.<\/p>\n There are many different bindings, and all of them are described in the knockout.js documentation (https:\/\/knockoutjs.com\/documentation\/introduction.html). Here are some of them: visible, text, html, if, foreach, click<\/strong>.<\/p>\n Also, Magento 2 has its own custom bindings, and all of them can be specified in the data-bind<\/strong> attribute, while some of them can be specified as an attribute, a virtual element knockout.js<\/strong> or as a custom element. Here are some of them:<\/p>\n It is responsible for the output of the template specified in the component, here is the function responsible for this output: This is a virtual element used for translation in Magento 2. You might want to use <! – ko text: -><\/em>, yet bear in mind that the code I suggest was created with the aim that everything would integrate with the translations in Magento 2. You can also use data-bind<\/strong> as an attribute:<\/p>\n This one is used to add a function after the item is rendered.<\/p><\/li>\n This binding is used to fade in or fade out of the element depending on the function result.<\/p><\/li>\n This binding is used to initiate jqueryUi widget.<\/p><\/li>\n<\/ol>\n Here is the list of knockout bindings:<\/p>\n 1.Layout:<\/p>\n 2. Flow:<\/p>\n 3. Fields:<\/p>\n 4. Template rendering:<\/p>\n Connects the Ui element with the component that is declared in xml in jsLayout or in <script type=”text\/x-<\/em>magento-init”><\/em>, and the already registered one in uiRegistry<\/strong>.<\/p>\n I will cite the checkout as an example.<\/p>\n xml:<\/p>\n In the line <item name=”checkout” <\/em>xsi:type=”array”><\/em> in the attribute name we declare the component name, checkout<\/strong> in our case, and call it in phtml:<\/p>\n In this example we immediately created checkout<\/strong> in xml, and then it was binded to UiRegistry<\/strong> with the help of our configurations parcing specified in xml and getting them with the help of json with с помощью парсинга наших настроек указанных xml и получением их с помощью json with $block->getJsLayout()<\/strong> php function.<\/p>\n Also, if we bind a component to a DOM element through data-mage-init, the scope is bound to the element to which we have bound the component or widget.<\/p>\n Example:<\/p>\n The #checkout-loader<\/strong> element becomes the scope of the checkoutLoader<\/strong> component.<\/p>\n Knockout templates can be specified in different ways, and I will try to cover possible ways to specify templates for UiComponent.<\/p>\n Method #1. Specify the component in the viewmodel file itself, for example, as is done in the pop-up authorization form:<\/p>\n https:\/\/github.com\/m1kash\/magento2\/blob\/2.2-develop\/app\/code\/Magento\/Customer\/view\/frontend\/web\/js\/view\/authentication-popup.js#L28<\/p>\n Code:<\/p>\n As you can see, the standard template Magento_Customer \/ authentication-popup<\/strong> will be used, and when we create our custom component ui, we can specify our template via mixin, layout, text \/ x-magento-init, data-mage-init.<\/p>\n Method #2. Specify our template in text \/ x-magento-init:<\/p>\n Method #3. Specify in jsLayout<\/strong>, the way it was done in checkout:<\/p>\n For the Magento_Checkout \/ js \/ view \/ summary component, apply the template that we specified in xml: Magento_Checkout \/ summary<\/strong>.<\/p>\n Method #4. Specify the template directly in the template where our component is called the following way:<\/p>\n For the first 3 ways, we need to specify a call to our template, as it is done in checkout: As you can see from the code, we declared the scope for the #checkout<\/strong> element and called the function getTemplate ()<\/strong> via the virtual element. To learn how the function performs follow the link (https:\/\/github.com\/magento\/magento2\/blob\/2.2\/app \/code\/Magento\/Ui\/view\/base\/web\/js\/lib\/core\/element\/element.js#L266) It is clear from the heatworm that we use foreach, alternately displaying data from an array or $ date object, for example, in the last foreach, getRegion ()<\/strong> is used to get the sidebar and so on. The function code is in github(<\/span>https:\/\/github.com\/m1kash\/magento2\/blob\/2.2-develop\/app\/code\/Magento\/Ui\/view\/base\/web\/js\/lib\/core\/collection.js#L205<\/span>).<\/span><\/p>\n Observables are the observable objects and arrays that are updated asynchronously as the value changes. In knockout.js, this is implemented by the following functions:<\/p>\n 1. ko.observable()<\/strong> – the function is used for observable objects to change values asynchronously, for example, when receiving data from json. If we want to assign a value to the observed object or array, then we pass our value to the function argument:<\/p>\n
\n<\/a>How do you bind a ko view model to a section of the DOM with the scope binding
\n<\/a>How do you render a ko template of a UiComponent
\n<\/a>Demonstrate an understanding of the different types of knockout observables
\n<\/a>What common ko bindings are used
\n<\/a>Demonstrate an understanding of ko virtual elements<\/a><\/p>\n\n
How do you use knockout.js bindings<\/h2>\n
<span data-bind=\"text: customer().fullname\"><\/span><\/pre>\n
\n
<!-- ko template: getTemplate() --><!-- \/ko --><\/pre>\n
\nhttps:\/\/github.com\/magento\/magento2\/blob\/2.2\/app\/code\/Magento\/Ui\/view\/base\/web\/js\/lib\/core\/element\/element.js#L266<\/p>\ngetTemplate: function () {\r\n return this.template;\r\n }<\/pre>\n<\/li>\n<!-- ko i18n: ‘Text’ --><!-- \/ko --> <\/span><\/i><\/pre>\n<span translate=\"Text\" \/>\r\n<span data-bind=\"i18n: 'Text'\"><\/span><\/pre>\n<\/li>\n
<<\/span>span<\/b> data-bind<\/span>=<\/span>\"afterRender: setModalElement\"<\/span>><\/<\/span>span<\/b>><\/span><\/pre>\n<div data-bind=\"fadeVisble: isVisble\"><\/div><\/pre>\n
<div data-bind=\"mageInit: ‘mywidget’:{‘configuration-value’:true}\"><\/div><\/pre>\n\n
\n
\n
\n
How do you bind a ko view model to a section of the DOM with the scope binding<\/h2>\n
<referenceContainer name=\"content\">\r\n <block class=\"Magento\\Checkout\\Block\\Onepage\" name=\"checkout.root\" template=\"Magento_Checkout::onepage.phtml\" cacheable=\"false\">\r\n <arguments>\r\n <argument name=\"jsLayout\" xsi:type=\"array\">\r\n <item name=\"components\" xsi:type=\"array\">\r\n <item name=\"checkout\" xsi:type=\"array\">\r\n <item name=\"component\" xsi:type=\"string\">uiComponent<\/item>\r\n <item name=\"config\" xsi:type=\"array\">\r\n <item name=\"template\" xsi:type=\"string\">Magento_Checkout\/onepage<\/item>\r\n <\/item>\r\n <\/item>\r\n <\/argument>\r\n <\/arguments>\r\n <\/block>\r\n <\/referenceContainer><\/pre>\n
<div id=\"checkout\" data-bind=\"scope:'checkout'\" class=\"checkout-container\">\r\n<!-- ko template: getTemplate() --><!-- \/ko -->\r\n<\/div><\/pre>\n
<script type=\"text\/x-magento-init\">\r\n {\r\n \"#checkout\": {\r\n \"Magento_Ui\/js\/core\/app\": <?= \/* @escapeNotVerified *\/ $block->getJsLayout() ?>\r\n }\r\n }\r\n <\/script><\/pre>\n<div id=\"checkout-loader\" data-role=\"checkout-loader\" class=\"loading-mask\" data-mage-init='{\"checkoutLoader\": {}}'><\/pre>\nHow do you render a ko template of a UiComponent<\/h2>\n
define([...], function (...) {\r\n 'use strict';\r\n\r\n return Component.extend({\r\n defaults: {\r\n template: 'Magento_Customer\/authentication-popup'\r\n },\r\n });\r\n});\r\n<\/pre>\n<script type=\"text\/x-magento-init\">\r\n {\r\n \"*\": {\r\n \"Magento_Ui\/js\/core\/app\": {\r\n \"components\": {\r\n \"customComponent\": {\r\n \"template\": \"Magento_Theme\/template\",\r\n \"component\": \"Magento_Theme\/js\/view\/custom-component\"\r\n }\r\n }\r\n }\r\n }\r\n }\r\n<\/script><\/pre>\n<item name=\"summary\" xsi:type=\"array\">\r\n <item name=\"component\" xsi:type=\"string\">Magento_Checkout\/js\/view\/summary<\/item>\r\n <item name=\"displayArea\" xsi:type=\"string\">summary<\/item>\r\n <item name=\"config\" xsi:type=\"array\">\r\n <item name=\"template\" xsi:type=\"string\">Magento_Checkout\/summary<\/item><\/item>\r\n <item name=\"children\" xsi:type=\"array\"><\/item>\r\n<\/item><\/pre>\n
<!-- ko template: \"BelVG_CustomModule\/custom-template\" --><!-- \/ko →<\/pre>\n
\nhttps:\/\/github.com\/magento\/magento2\/blob\/2.2\/app\/code\/Magento\/Checkout\/view\/frontend\/templates\/onepage.phtml#L17.<\/p>\n<div id=\"checkout\" data-bind=\"scope:'checkout'\" class=\"checkout-container\">\r\n <!-- ko template: getTemplate() --><!-- \/ko -->\r\n <script type=\"text\/x-magento-init\">\r\n {\r\n \"#checkout\": {\r\n \"Magento_Ui\/js\/core\/app\": <?= \/* @escapeNotVerified *\/ $block->getJsLayout() ?>\r\n }\r\n }\r\n <\/script>\r\n<\/div><\/pre>\n
\nbut in simple words it receives a link to the static address of our template and after all this it renders our template.
\nHere is the example of the github component’s checkout template (<\/span>https:\/\/github.com\/magento\/magento2\/blob\/2.2\/app\/code\/Magento\/Checkout\/view\/frontend\/web\/template\/onepage.html<\/span>):<\/p>\n<!--\r\n\/**\r\n * Copyright © Magento, Inc. All rights reserved.\r\n * See COPYING.txt for license details.\r\n *\/\r\n-->\r\n<!-- ko foreach: getRegion('authentication') -->\r\n<!-- ko template: getTemplate() --><!-- \/ko -->\r\n<!--\/ko-->\r\n\r\n<!-- ko foreach: getRegion('progressBar') -->\r\n<!-- ko template: getTemplate() --><!-- \/ko -->\r\n<!--\/ko-->\r\n\r\n<!-- ko foreach: getRegion('estimation') -->\r\n <!-- ko template: getTemplate() --><!-- \/ko -->\r\n<!--\/ko-->\r\n\r\n<!-- ko foreach: getRegion('messages') -->\r\n <!-- ko template: getTemplate() --><!-- \/ko -->\r\n<!--\/ko-->\r\n<div class=\"opc-wrapper\">\r\n <ol class=\"opc\" id=\"checkoutSteps\">\r\n <!-- ko foreach: getRegion('steps') -->\r\n <!-- ko template: getTemplate() --><!-- \/ko -->\r\n <!--\/ko-->\r\n <\/ol>\r\n<\/div>\r\n\r\n<!-- ko foreach: getRegion('sidebar') -->\r\n <!-- ko template: getTemplate() --><!-- \/ko -->\r\n<!--\/ko-->\r\n<\/pre>\n![\"Igor](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2019\/03\/Igor-Dragun1.png\" "\\"What")
Partner With Us <\/h3>Let's discuss how to grow your business. Get a Free Quote.<\/span><\/div> Talk to Igor<\/a><\/div>\n
Demonstrate an understanding of the different types of knockout observables<\/h2>\n
\n2. ko.observableArray([])<\/strong> – the function is used for the observed arrays, which can also be updated asynchronously. You can also change the values and use methods for arrays such as: .map, .filter, .each, etc.<\/p>\nvar Name = ko.observable(null);\r\nName('New value!');<\/pre>\n
![\"understanding](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2019\/03\/understanding-knockout-framework.png\" "\\"What")
<\/a><\/p>\n![\"nderstanding](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2019\/03\/Understanding-knockout-framework-name.png\" "\\"What")
<\/a><\/p>\n