Question

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

example.html的

nohup matlab -nodisplay -nosplash -nojvm -nodesktop -r "demCF datasetName 1 10 1000 0" 2>&1 > demCF_datasetName_100.out &

example.js

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

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

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

1 个答案: