render a template inside a html page

Question

This Meteor client code renders a report template from raw html. A click #sginHere event needs to place a canvas which is coded in a different file with its own template and events into the report template in place of event.target.appendChild .

Is there a way to do this and how?

Template.report.helpers({
  value: function() {
    return rawHTML;
  }
});

Template.report.events({
  'click #signHere': function(vent) {

    //create a canvas_element with all its styling and events
    event.target.appendChild(canvas_element);  //<-- redundant

    //render it from already existed template
    event.target.appendChild(canvas_from_different_template)  //<-- my wish
  }
});

//canvas file
let ctx = null;
let signatureCnvs = null;
Template.canvas.onRendered(function() {
  //do stuff
});

Template.canvas.events({
  'mousemove canvas': function(event) {
    //do stuff
  }
});

canvas.signature {
  height: 15em;
  width: 25em;
  border: 1px solid black;
}

<template name="report">
  {{{value}}}
</template>

<template name="canvas">
  <canvas class="signature"></canvas>
</template>

Answer 1

Use Dynamic Template and helpers. Let me show you:

let clickSign = false;
Template.report.helpers({
   wantToSign: function() {
      return clickSign;
 }
});
Template.report.events({
   'click #signHere': function(event) {
      clickSign = true;
   }
});
// Rest of your code ...

And in your html:

<template name="report">
   {{{value}}}
   {#if wantToSign}}
      {{> canvas}}
   {{/if}}
</template>
<template name="canvas">
   <canvas class="signature"></canvas>
</template>