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

knockoutjsmagento2

Update

x-magento-init with knockout does not work from a html template, but works perfectly when used identically inside a phtml file.

Status:

~~x-magento-init script being processed inside modal content as soon as it is loaded.~~
~~Component running initialize function.~~
Component matching scope / pulling properties into page html [Not yet]

I have a html template that is being pulled in like so:

define([
    'jquery',
    'Magento_Ui/js/modal/prompt',
    'text!elcocustomer/template/summary-edit/password.html',
    'text!elcocustomer/template/summary-edit/address.html',
    'text!elcocustomer/template/summary-edit/text.html',
    'text!elcocustomer/template/summary-edit/shipping-address.html'
], function(
    $,
    prompt,
    passwordTemplate,
    addressTemplate,
    textTemplate,
    deliveryAddress
) {

    var templates = {
        text: textTemplate,
        password: passwordTemplate,
        address: addressTemplate,
        delivery: deliveryAddress
    };

This is then being pulled into a Magento 2 modal prompt ( 'Magento_Ui/js/modal/prompt') like so:

    promptContentTmpl: addressTemplate,

This works well so far, but now I want to pull data into the html template (addressTemplate) itself, so I have added this to the address template:

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "customer-country-select": {
                    "component": "Elcometer_Customer/js/summary/location-input"
                }
            }
        }
    }
}
</script>

<div data-bind="scope: 'customer-country-select'">
    <h2 data-bind="text: message"></h2>
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

This was taken from another answer on here that appears to work for people – but with different usage. I believe I need to trigger the x-magento-init in the template file… I need to double check the initialise function ins't running on that component first.

Is what I'm trying to do possible?

Best Answer

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

Related Solutions

Magento – Knockout HTML template being cached

From my experience, we should disable Browser Cache when developing. It's one of the way for preventing Browser Cache, not full answer to this quesion.

For example:

Chrome: Network tab > Disable cache

UPDATE:

-Cache on the server side: my team had the same problem with Vagrant box and Puppet. The Puppet Master had the Opcache on the server side. So, the content was cached(can be some days). So, we need to clean the Opcache server.

Magento – How to send data from html template to controller magento 2

You can look at the Magento\Customer module to see an example of how this works.

\vendor\magento\module-checkout\view\frontend\web\template\authentication.html is the knockout template.

The form submit handler is in \vendor\magento\module-checkout\view\frontend\web\js\view\authentication.js and look like this:

/**
 * Provide login action.
 *
 * @param {HTMLElement} loginForm
 */
login: function (loginForm) {
    var loginData = {},
        formDataArray = $(loginForm).serializeArray();

    formDataArray.forEach(function (entry) {
        loginData[entry.name] = entry.value;
    });

    if ($(loginForm).validation() &&
        $(loginForm).validation('isValid')
    ) {
        fullScreenLoader.startLoader();
        loginAction(loginData, checkoutConfig.checkoutUrl, undefined, messageContainer).always(function () {
            fullScreenLoader.stopLoader();
        });
    }
}

The loginAction function is contained in: \vendor\magento\module-customer\view\frontend\web\js\action\login.js. Here it is:

/**
 * @param {Object} loginData
 * @param {String} redirectUrl
 * @param {*} isGlobal
 * @param {Object} messageContainer
 */
action = function (loginData, redirectUrl, isGlobal, messageContainer) {
    messageContainer = messageContainer || globalMessageList;

    return storage.post(
        'customer/ajax/login',
        JSON.stringify(loginData),
        isGlobal
    ).done(function (response) {
        if (response.errors) {
            messageContainer.addErrorMessage(response);
            callbacks.forEach(function (callback) {
                callback(loginData);
            });
        } else {
            callbacks.forEach(function (callback) {
                callback(loginData);
            });
            customerData.invalidate(['customer']);

            if (redirectUrl) {
                window.location.href = redirectUrl;
            } else if (response.redirectUrl) {
                window.location.href = response.redirectUrl;
            } else {
                location.reload();
            }
        }
    }).fail(function () {
        messageContainer.addErrorMessage({
            'message': 'Could not authenticate. Please try again later'
        });
        callbacks.forEach(function (callback) {
            callback(loginData);
        });
    });
};

And the controller that receives the data is this: \vendor\magento\module-customer\Controller\Ajax\Login.php:

public function execute()
{
    $credentials = null;
    $httpBadRequestCode = 400;

    /** @var \Magento\Framework\Controller\Result\Raw $resultRaw */
    $resultRaw = $this->resultRawFactory->create();
    try {
        $credentials = $this->helper->jsonDecode($this->getRequest()->getContent());
    } catch (\Exception $e) {
        return $resultRaw->setHttpResponseCode($httpBadRequestCode);
    }
    if (!$credentials || $this->getRequest()->getMethod() !== 'POST' || !$this->getRequest()->isXmlHttpRequest()) {
        return $resultRaw->setHttpResponseCode($httpBadRequestCode);
    }

    $response = [
        'errors' => false,
        'message' => __('Login successful.')
    ];
    try {
        $customer = $this->customerAccountManagement->authenticate(
            $credentials['username'],
            $credentials['password']
        );
        $this->customerSession->setCustomerDataAsLoggedIn($customer);
        $this->customerSession->regenerateId();
        $redirectRoute = $this->getAccountRedirect()->getRedirectCookie();
        if (!$this->getScopeConfig()->getValue('customer/startup/redirect_dashboard') && $redirectRoute) {
            $response['redirectUrl'] = $this->_redirect->success($redirectRoute);
            $this->getAccountRedirect()->clearRedirectCookie();
        }
    } catch (EmailNotConfirmedException $e) {
        $response = [
            'errors' => true,
            'message' => $e->getMessage()
        ];
    } catch (InvalidEmailOrPasswordException $e) {
        $response = [
            'errors' => true,
            'message' => $e->getMessage()
        ];
    } catch (LocalizedException $e) {
        $response = [
            'errors' => true,
            'message' => $e->getMessage()
        ];
    } catch (\Exception $e) {
        $response = [
            'errors' => true,
            'message' => __('Invalid login or password.')
        ];
    }
    /** @var \Magento\Framework\Controller\Result\Json $resultJson */
    $resultJson = $this->resultJsonFactory->create();
    return $resultJson->setData($response);
}

Looking at this controller, we can see that it uses $credentials = $this->helper->jsonDecode($this->getRequest()->getContent()); to get the request data, so I suggest you try that.