How to employ Events in Knockout JS in Magento 2?

Here are the following steps that will explain to you How to use Events in Knockout JS Magento 2? – Magento 2:

1. Insert Magento events observer into a view file
2. State the function select Row in view-model

Get your best customized Magento 2 eCommerce solution, explore today, click here!!!

In the previous article, I’ve explained to you how to produce a data grid on the frontend page using knockout JS. Here I’ll show you how to use Magento 2 is knockout JS. I’m using source code in the sample of the previous article. So please read it before practising the sample in this post.

How to employ Events in Knockout JS in Magento 2?

After inserting event clicks into each row in the data table, I got the result below:

Insert events observer into a view file

/app/code/[NameSpace]/[ModuleName]/view/frontend/web/template/grid.html

<table class="data table base list">

    <thead>

        <tr data-bind="foreach: columns">

            <th data-bind="text: headerText"></th>

        </tr>

    </thead>

    <tbody data-bind="foreach: items">

        <tr data-bind="event: {click : $parent.selectRow}, foreach: columns">

            <td><span data-bind="text:  renderer ? renderer.render($parent) : $parent[rowText] "></span></td>

        </tr>

    </tbody>

</table>

You can see I insert the event observer into <tr> element: <tr data-bind=”event: {click: $parent.selectRow}” >

In this situation, the $parent is the view-model after the user clicked on each row in this table, the function select Row in grid.js will be called.

States the function select Row in view-model

/app/code/[NameSpace]/[ModuleName]/view/frontend/web/js/view/grid.js

selectRow: function(data, event) {

    alert('You select item: ' + data.name);

}

It is a very easy function to explain the name of the item which the user selected on. You can see the two following  factors in this function :

• Data: an object which is suggested to an item object. So I use “data. name” which means the name of the item.
• Event: the event object

Also see other events such as dblclick, mouseover, modify (for input element), etc.

<tr data-bind="event: {dblclick : $parent.selectRow}" >

 <tr data-bind="event: {mouseover : $parent.selectRow}" >

I hope the following steps help you how to employ Events in Knockout JS in Magento 2.  Find more Magento tutorials by our Experts.

If you’re looking to develop an online store with Magento 2, click here and start!!!