2

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?

  • What data is it you need to pull into the template and where is it from (PHTML file, JS file etc). – Ben Crook Feb 6 '17 at 15:29
  • Either from a phtml or from a js file - I'd like either. I'm struggling to make the thing run at all and display a simple message. I've confirmed that the initialise function does get run. – LM_Fielding Feb 6 '17 at 15:34
  • Try to use different modal/modal-component instances, which can render child ui components, instead of raw templates for modal widget. – Max Feb 6 '17 at 15:51
  • 1
    x-magento-init won't work inside HTML templates, you can still access the data contained in your JS though so this should be possible. If I get time to look into it for you I'll try and provide an answer, it is difficult though as it's such as customised feature with very little documentation so far. – Ben Crook Feb 6 '17 at 16:54
  • 1
    You can look at modal components in admin on product edit form (advanced pricing). This modal components contain child components( firm elements) – Max Feb 6 '17 at 17:14
3

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.

enter image description here

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 -->
  • <div data-bind="scope: 'templateTest'"> <!-- ko template: getTemplate() --><!-- /ko --> </div> Try putting this in a modal. – LM_Fielding Feb 7 '17 at 12:31
  • @LM_Fielding Ahh now I get it, I can replicate the same thing. – Ben Crook Feb 7 '17 at 13:12
  • How? the x-magento-init is processed but nothing happens with all of the same code. Isn't all of this frontend so it doesn't matter how you get the x-scripts into the html? – LM_Fielding Feb 7 '17 at 13:31
  • 1
    I'm not sure why it doesn't work, all I did is move getTemplate into a modal and it stopped working, moved it out the modal and it worked again - so the problem seems to be HTML templates not running inside modals (and possibly other JS components:). I'll debug if I get time, it may well be a core bug you've found. It might be a good idea to change your question a bit so it focuses on the fact getTemplate doesn't work in a modal (if that's your main issue). – Ben Crook Feb 7 '17 at 14:50
  • 1
    That's why I was confused with your question, I thought you was asking how to access the data but it turns out it just doesn't want to play ball. 2.1.2 I believe. – Ben Crook Feb 7 '17 at 15:01

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.