Meteor：选择选项后将模板渲染到表单上的区域答案

【问题标题】：Meteor: Render a template into an area on a form after an option is selectedMeteor：选择选项后将模板渲染到表单上的区域
【发布时间】：2017-09-24 12:11:46
【问题描述】：

在从下拉列表中进行选择后，我正在尝试将模板呈现到表单上的某个区域中。下面是我糟糕的尝试，但它只是附加了一个模板字符串。

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 {
    }
  }

【问题讨论】：

标签： javascript templates meteor spacebars

【解决方案1】：

使用Template-dynamic 选择要渲染的模板来实现此目的的最佳方法：

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

【讨论】：