Skip to content

Magento 2 : Unable to process binding “click: function(){return openMyList }” in Magento 2

I’m trying to open Custom Module List when I click on the button in the header. For this I tried the below code.

 <div id="my_list-div" data-bind="scope:'my_list'">

    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
        {
            "#my_list-div": {
                "Magento_Ui/js/core/app":{
                    "components":{
                        "my_list":{
                            "component": "ABCSolutions_MYList/js/list",
                            "template": "ABCSolutions_MYList/list"
                        }
                    }
                }
        }
    }
    </script>

</div>

and html code is

<div class="container">
.........
</div>

and the js is

    define([
    'ko',
    'uiComponent',
    'mage/url',
    'mage/storage',
    'jquery',
    'Magento_Ui/js/modal/modal',
    'loader',
    'Magento_Ui/js/modal/confirm',
], function (ko, Component, urlBuilder,storage, $, modal, loader, confirm) {
    'use strict';

    let enterePressEvent = false;

    return Component.extend({

        defaults: {
            template: 'ABCSolutions_MYList/list',
        },

       
        showLoading: ko.observable(false),
        loadingMessage: ko.observable(''),
        loadingMessage2: ko.observable(''),


        initObservable: function () {
            this._super();
            return this;
        },

        initialize: function () {
            this._super();
        },

        openMyList: function () {
            alert("Open My List");
        },


    });

});

I included this in the header file as shown below code in the default.xml file

    <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="head.additional">
            <block class="MagentoFrameworkViewElementTemplate" name="header.my.list" template="ABCSolutions_MYList::list.phtml">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="my_list" xsi:type="array">
                                <item name="component" xsi:type="string">ABCSolutions_MYList/js/list</item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

In Header.phtml file added the anchor tag

<a class="my_lists"  title="My List" data-bind="click: openMyList" style="cursor:pointer;">                   
              <i class="porto-icon porto-icon-list"></i>
          </a>

I’m getting the error Unable to process binding “click: function(){return openMyList }”.

Any issue with the above code? please help on this