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

Question

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

In header.phtml file added x-magento-init 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="Magento\Framework\View\Element\Template" 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

You need to do all your code in the file you want to customise i.e header.phtml, put the text/x-magento-init code there and wrap the html you want to manipulate within a div that has the scope data bind. — Vivek Kumar
– Vivek Kumar, Commented Sep 4, 2024 at 12:24
Yes, it's not required either way as you're adding the js component through text/x-magento-init — Vivek Kumar
– Vivek Kumar, Commented Sep 4, 2024 at 12:47

Vivek Kumar · Accepted Answer · 2024-09-03 12:03:18Z

0

The ko functions you have defined will only work within your defined scope, you should modify the initial code like below;

 <div id="my_list-div" data-bind="scope:'my_list'">
    // all your functions will only work within this div as it is your scope 
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>
    <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>

So, in short you cannot write the html you need to manipulate in another phtml file it should be within the the initial code and within div with id my_list-div

answered Sep 3, 2024 at 12:03

Vivek Kumar

5,7932 gold badges26 silver badges55 bronze badges

not working. however, if the script is outside of the div getting an error.

Bojjaiah
– Bojjaiah

2024-09-04 04:47:14 +00:00
Commented Sep 4, 2024 at 4:47
add your updated code in question.

Vivek Kumar
– Vivek Kumar

2024-09-04 06:24:46 +00:00
Commented Sep 4, 2024 at 6:24
updated my thread as suggested your answer.

Bojjaiah
– Bojjaiah

2024-09-04 07:37:06 +00:00
Commented Sep 4, 2024 at 7:37

Add a comment |

Stack Exchange Network

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

1 Answer 1

Your Answer

Hot Network Questions

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

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions