流星：选择一个选项后，将模板渲染到表单上的某个区域

Question

从试验下拉菜单中选择后，我试着将模板渲染到表单中的某个区域。我可怜的尝试是在下面，但它只是追加模板的字符串。

example.html的

<div class="row"> 
    <div class="col s12 m6"> 
     <label for="certCov">Enter Coverage Information</label> 
     <select class="error browser-default" id="certCov" required name="certCove"> 
      <option value="" disabled selected>Select Coverage</option> 
      {{#each getCoverageType}} 
      <option value="{{this.key}}">{{this.value}}</option> 
      {{/each}} 
     </select> 
    </div> 
</div> 
<div class="row"> 
    <div class="col s6"> 
     <label for="startDate">Enter Start Date</label> 
     <input id="startDate" type="date" class="datepicker"> 
    </div> 
    <div class="col s6"> 
     <label for="expiryDate">Enter Expiration Date</label> 
     <input id="expiryDate" type="date" class="datepicker"> 
    </div> 
</div> 

<div id="selectedCov"> 
    {{>!template will be rendered here!}} 
</div> 

example.js

"change #certCo": function (event) { 
    event.preventDefault(); 
    let selectedCov = $(event.target).val(); 
    if (selectedCov == "autoLiability") { 
     $("#selectedCov").append('{{>autoLiability}}'); 
    } else if (selectedCov == "evidProp") { 
     $("#selectedCov").append("{{>epc}}"); 
    } else if (selectedCov == "umbrella") { 
     $("#selectedCov").append("{{>umbrella}}"); 
    } else if (selectedCov == "genLiability") { 
     $("#selectedCov").append("{{>genLiability}}"); 
    } else if (selectedCov == "workComp") { 
     $("#selectedCov").append("{{>workComp}}"); 
    } else { 
    } 
    } 

Answer 1

使用Template-dynamic选择模板来渲染实现这一目标的最佳方式：

例子。 html

个

<template name="coverageInformation"> 
    <div class="row"> 
     <div class="col s12 m6"> 
      <label for="certCov">Enter Coverage Information</label> 
      <select class="error browser-default" id="certCov" required name="certCove"> 
       <option value="" disabled selected>Select Coverage</option> 
       {{#each coverageTypes}} 
       <option value="{{this}}">{{this}}</option> 
       {{/each}} 
      </select> 
     </div> 
    </div> 

    <div id="selectedCov"> 
     {{> coverageDetail selectedCov=selectedCov}} 
    </div> 
</template> 

<template name="autoLiability"> <h3> autoLiability </h3> </template> 
<template name="evidProp"> <h3> evidProp </h3> </template> 
<template name="umbrella"> <h3> umbrella </h3> </template> 
<template name="genLiability"> <h3> genLiability </h3> </template> 
<template name="workComp"> <h3> workComp </h3> </template> 

<template name="coverageDetail"> 
    <h1> {{selectedCov}} </h1> 
    {{> Template.dynamic template=selectedCov}} 
</template> 

example.js

Template.coverageInformation.onCreated(function helloOnCreated() { 
    // counter starts at 0 
    this.selectedCoverage = new ReactiveVar(''); 
}); 

Template.coverageInformation.helpers({ 
    selectedCov() { 
    return Template.instance().selectedCoverage.get(); 
    }, 
    coverageTypes(){ return [ 'autoLiability', 
          'evidProp', 
          'umbrella', 
          'genLiability', 
          'workComp' 
          ]; 
    }, 
}); 

Template.coverageInformation.events({ 
    'change #certCov'(event, instance) { 
    instance.selectedCoverage.set(event.target.value); 
    }, 
});