Magento – Magento2 : How to bind custom Knockout Method to a data-bind

knockoutjsmagento2

I need the product URL for each product in the checkouts cart.

Therefore I want to edit vendor/magento/module-checkout/view/web/templates/summary/item/details.html and add my custom method there, lets call it myMethod.

This is how my code looks like right <strong class="product-item-name" data-bind="text: $parent.name, myMethod:{}"></strong>.

However, in a console, i have the log that there's no function called myMethod. Logic!

How can I create myMethod in Order to let it work? Where do I need to inject my JS?

What do I want to do? For legal reasons, I need the URL of the product. I want KO to do my request by calling an ajax file that returns the URL of the product and then links it. The final code in details.html will look like this:

<a class="product-item-name" data-bind="text: $parent.name, myMethod:{}"></a>

In onepage.phtml I've added the following to test, but it does not work:

<script type="text/javascript">
    require([
        'jquery',
        'ko'
    ], function($, ko) {
        ko.bindingHandlers.myMethod = {
            init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
                jQuery(this).css("background-color","red");
            }
        };
    });
</script>

How can I achieve what I what?

Best Answer

For Magento to apply the bindings you need to add your Knockout JS using the UI Components like so:

Inside the PHTML Template file

Pay extra attention to example-scope as it needs to match the scope of the markup.

Component links to your JS file, and template links to your HTML (or PHTML) file that contains the data-binds (and scope).

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "example-scope": {
                    "component": "VENDOR_MODULE/js/name-of-your-js-file",
                    "template": "Magento_Checkout/summary/item/details"
                }
            }
        }
    }
}
</script>

<div data-bind="scope: 'example-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

Inside your JS file

define(['jquery', 'ko'], function($, ko) {
    return function(config) {
        // YOUR SCRIPT HERE
    }
});

Related Solutions

Magento – How to i overwrite the summary block in magento2

Hey Bhupendra here answer for you,

You will need to override the template file for summery block using requirejs-config.js(create this file in your module`s view/frontend/requirejs-config.js)

var config = {
    map: {
        '*': {
             'Magento_Checkout/template/summary/cart-items.html':
          '<Vendor>_<ModuleName>template/summary/cart-items.html'
        }
  }
};

up vote if you are satisfied with answer. :)

Magento – Magento 2 – Will x-magento-init tag apply from a html template

I'm still not entirely sure on what data you need to pass through, you can pass data to HTML templates the same was you would to a PHTML template.

A simple example:

Ben/TemplateTest/view/frontend/templates/container.phtml

<div data-bind="scope: 'templateTest'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "templateTest": {
                        "component": "Ben_TemplateTest/js/template-test"
                    }
                }
            }
        }
    }
</script>

Ben/TemplateTest/view/frontend/web/template/test.html

<h2>Template Test</h2>

<p data-bind="text: message"></p>

Ben/TemplateTest/view/frontend/web/js/template-test.js

define(['jquery', 'ko', 'uiComponent', 'domReady!'], function($, ko, Component) {
    'use strict';

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

        defaults: {
            message: 'This is a test message!',
            template: 'Ben_TemplateTest/test'
        }
    });
});

Here you can see the data being passed through to the HTML template.

Adding extra templates

To call additional templates you can use:

<!-- ko template: "Package_Namespace/template-name" --><!-- /ko -->

Or pass it a property from your JS:

<!-- ko template: someProp --><!-- /ko -->