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

Question

I am tryin to have a template rendered into an area on my form after a selection is made from the dropdown. My poor attempt is below, but it is just appending a string of the template.

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

The best way to achieve this by using Template-dynamic to select the template to render:

example.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);
  },
});