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>

在html页面内渲染模板

1 个答案: