Create Magento2 JS template ("x-magento-template") and process via javascript

Question

I have a page with a form where the user can add multiple items to the form by using a [+] button. The plus button is adding another set of fields to enter more data every time it is clicked.

Right now the javascript code is just appending some HTML string with jQuery, but I'd like to do this in a cleaner way just like Magento 2 is doing this with their x-magento-template blocks, like:

<script id="some-template" type="text/x-magento-template">
 <div class="wrapper">
 <input id="<%- data.id %>" name="<%- data.name %>" placeholder="<%- data.placeholder %>" />
 </div>
</script>

How can I now take this template and render it with the input of a data object? And after that, append it to my form?

The JS I have (of which I'm going to put the HTML in newField into the x-magento-template):

define([
 "jquery",
 "mage/translate",
 "domReady!"
], function($) {
 $("button#js-add-more").click(function(e) {
 e.preventDefault();
 var newField = '<div class="wrapper"><input id="field-' + ($('form#myform input[id^=field-]').length + 1) + ' " name="field[]" placeholder="' + $.mage.__('Enter data') + '" /></div>';
 $('form#myform').append(newField);
 });
});

• Ben Crook: I think the best way to do this would be with Knockout templates, similar to how the checkout is built. This live example may help.

Answer 1

I found out how to do this. You can use mage/template to use these x-magento-template JS templates and render them.

define([
 "jquery",
 "mage/template",
 "mage/translate",
 "domReady!"
], function(,ドル mageTemplate) {
 $("button#js-add-more").click(function(e) {
 e.preventDefault();
 var num = $('form#myform input[id^=field-]').length + 1,
 template = mageTemplate('#some-template');
 var newField = template({
 data: {
 id: 'field-' + num,
 name: 'field[]',
 placeholder: $.mage.__('Enter data')
 }
 });
 $('form#myform').append(newField);
 });
});

And the some-template is like I also posted in my question:

<script id="some-template" type="text/x-magento-template">
 <div class="wrapper">
 <input id="<%- data.id %>" name="<%- data.name %>" placeholder="<%- data.placeholder %>" />
 </div>
</script>

• Chintan Kaneriya: Is it possible to replace the data instead of append? I am fetching image URLs using a Magento template. whenever I click a button I get images but they are just appending. what I want is when we click on the button we get one image then we click again and this time image should be replaced with the new one. I tried to use the below code but it didn't work either. $('form#myform').after(newField)
• 7ochem: It is a long time ago for me. I guess you can just replace it? Or remove all children and then append, that will do the same. You probably need to search for how to do that with jQuery. It is kind of unrelated topic of Magento2 JS template here...