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
