Magento 2 : How to add a knockout component

Magento 2 : How to add a knockout component

We can add a knockout component to add some javascript behaviour in our pages. This is how to do it step by step.

1 . In the existing template, in which you want to include the knockout component, you first need to declare the component using the declarative notation and using the <script type="text/x-magento-init" /> tag.

This allows you to specify the component, basically the js file and the associated template.

<script type="text/x-magento-init">
    {
        "#demo-component-container": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "demo-ko-component": {
                        "component" : "MyNamespace_MyModule/js/ko-component",
                        "config" : {
                            "template":  "MyNamespace_MyModule/ko-template"
                        }
                    }
                }
            }
        }
    }
</script>

2. In the same template, you then need to declare the container that will receive the component.

<div id="demo-component-container" data-bind="scope: 'demo-ko-component'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

3. You need to create the js component.

It has to be place in app/code/MyNamespace/MyModule/view/frontend/web/js/ko-component.js.

For the purpose of the example, we are simply setting a property inputValue that we will use in the template.

/**
 * @license http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 * @author Didier Berlioz <berliozd@gmail.com>
 * @copyright Copyright (c) 2016 Addeos (http://www.addeos.com)
 */

define(['jquery', 'uiComponent', 'ko'], function ($, Component, ko) {
        'use strict';
        return Component.extend({
            initialize: function () {
                this._super();
                this.inputValue = ko.observable('my input value');
            }
        });
    }
);

4. You need to create the component template.

It will be placed here app/code/Namespace/Module/view/frontend/web/template/ko-template.html .

As said earlier, in the template we will just bind an input tag with the property inputValue set in the js component.

<p>Here is my knockout template.</p>
<input type="text" data-bind="value: inputValue">

And that’s all.

berliozd