HTMLページ内にテンプレートをレンダリング

Question

このMeteorクライアントコードは、生のhtmlからreportテンプレートをレンダリングします。 click #sginHereイベントは、event.target.appendChildの代わりにreportテンプレートに独自のテンプレートとイベントで別のファイルにコード化されたキャンバスを配置する必要があります。

これを行う方法はありますか？

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>