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!

  • make sure, that last version of Namespace_Module/web/js/view/listing.js has been loaded by browser – Max Sep 29 '17 at 9:21
  • yes i checked it's last version. – xanka Sep 29 '17 at 10:07
  • place alert message instead of ` return this` and run upgrade, static-content:deploy commands. And try again. – Bojjaiah Sep 29 '17 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 '17 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 '17 at 3:58
-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/....

  • 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 '17 at 8:02
  • Did you flash browser cache? It’s tested code, should work – Sohel Rana Sep 29 '17 at 9:23
  • i'm using mode is developer. – xanka Sep 29 '17 at 10:06
  • Whatever your mode browser don’t care. Browser cache js and html templates. So need hard refresh. – Sohel Rana Sep 29 '17 at 10:50
  • i was flush cache ah check file in pub folder, it's lastest version. – xanka Sep 29 '17 at 11:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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