0

I have created custom template with knockoutjs in magento 2.1.7.

The file name mytemplate.phtml

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "someScope": {
                    "component": "Namespace_Module/js/view/listing"
                    "template": "Namespace_Module/listing"
                }
            }
        }
    }
}
</script>

This is the content of file Namespace_Module/web/js/template/listing.html

<a role="button" href="#" data-toggle="collapse" data-bind="click: myFunction"><span data-bind="i18n: 'click me!'"></span></a> 

This is the content of file Namespace_Module/web/js/view/listing.js

define([
        'jquery',
        'ko',
        'uiComponent'
], function($, ko ,Component) {
    'use strict';
    var self = this;

    return Component.extend({
        initialize: function () {
            this._super();
        },
        /**
         * retrieve data to form update
         */
        myFunction: function () {
            console.log('is ok');
            return this;
        }
    });
})

when i load get error message is

Unable to process binding "click: function (){return myFunction }"

pls let me know, what's wrong in my code? Many thanks!

6
  • make sure, that last version of Namespace_Module/web/js/view/listing.js has been loaded by browser
    – Max
    Sep 29, 2017 at 9:21
  • yes i checked it's last version.
    – xanka
    Sep 29, 2017 at 10:07
  • place alert message instead of ` return this` and run upgrade, static-content:deploy commands. And try again.
    – Bojjaiah
    Sep 29, 2017 at 11:06
  • @xanka what exactly you are looking for inside myFunction? Are you going to display any message or print any data?.
    – Bojjaiah
    Sep 29, 2017 at 11:55
  • It not important, pls let me know what wrong in my code or any things make code run true.
    – xanka
    Oct 1, 2017 at 3:58

1 Answer 1

-1

Change button html following way:


<a role="button" href="#" data-toggle="collapse" data-bind="click: myFunction()"><span data-bind="i18n: 'click me!'"></span></a> 

Change your js function:


myFunction: function () {
    console.log('Click Me');
}

Make sure you deleted html template from pub/static/frontend/....

6
  • Thank @sohelrana, i was change like this but get the samle error message. Message: Unable to process binding "click: function (){return myFunction() }" Message: myFunction is not defined
    – xanka
    Sep 29, 2017 at 8:02
  • Did you flash browser cache? It’s tested code, should work
    – Sohel Rana
    Sep 29, 2017 at 9:23
  • i'm using mode is developer.
    – xanka
    Sep 29, 2017 at 10:06
  • Whatever your mode browser don’t care. Browser cache js and html templates. So need hard refresh.
    – Sohel Rana
    Sep 29, 2017 at 10:50
  • i was flush cache ah check file in pub folder, it's lastest version.
    – xanka
    Sep 29, 2017 at 11:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.