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?

8
  • 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, 2017 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. Feb 6, 2017 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, 2017 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, 2017 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, 2017 at 17:14

1 Answer 1

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 -->
7
  • <div data-bind="scope: 'templateTest'"> <!-- ko template: getTemplate() --><!-- /ko --> </div> Try putting this in a modal. Feb 7, 2017 at 12:31
  • @LM_Fielding Ahh now I get it, I can replicate the same thing.
    – Ben Crook
    Feb 7, 2017 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? Feb 7, 2017 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, 2017 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, 2017 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.