Magento – Magento 2 knockoutjs error data-bind even

knockoutjsmagento-2.1magento2uicomponent

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!

Best Answer

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/....

Related Topic