在HTML頁面內呈現模板

Question

此Meteor客戶端代碼呈現來自原始html的report模板。 A 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>