在html頁面中呈現模板

Question

此Meteor客戶端代碼從原始html呈現report模板。 click #sginHere事件需要將一個畫布（該畫布已編碼在具有自己的模板和事件的其他文件中）替換為report模板（代替event.target.appendChild 。

有辦法做到嗎？

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

使用動態模板和助手。 讓我演示給你看：

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

並在您的html中：

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