Javascript 选择下拉列表选项时Meteor加载模板

我有一个通过该模板生成的下拉列表，位于

ranvas.html

：

<template name="shape-dropdown">
    <select id = "shape-select">
        <option value = "none">select a shape</option>
        {{#each shape in shapes}}
            <option value = "{{this}}"> {{this}} </option>
        {{/each}}
    </select>
</template>

选择其中一个形状时，我希望加载位于

shape templates.html

中的模板。 例如，选择“随机线”选项时，我希望加载此模板：

<template name="rand_line">
   <label>x1: <input type="text"> - <input type="text"></label>
   <label>y1: <input type="text"> - <input type="text"></label>
   <label>x2: <input type="text"> - <input type="text"></label>
   <label>y2: <input type="text"> - <input type="text"></label>
   {{> rand_strokeStyle}}
</template>

x1:-
y1:-
x2:-
y2:-
{{>rand_strokeStyle}

您将要使用

如果扩展

.shape下拉列表.helpers

，则可以跟踪每个形状的1:1匹配模板，例如：

Template.shape-dropdown.helpers({
  shapes: [
    { shapetype: "random line", template: "rand_line"},
    ...
  ]
});

您需要一个事件处理程序来跟踪选择：

Template.shape-dropdown.events({
  'change #shape-select": function(ev){
  var tpl = shapes.filter(function ( obj ) {
    return obj.shape === $('#shape-select').val();
  })[0].template;
  Session.set('template',tpl)
  }
});

---

当然，您仍然需要一个助手将该会话变量的值作为动态助手的参数输入blaze模板

您可以将模板帮助器与从下拉菜单的

更改
事件处理程序中设置的被动变量一起使用。您使用的是Iron Router吗？@StefanL19不，我不是。您是否尝试使用会话？如何根据选项更改模板？我会使用
{{#let}}
并在助手中有一个指向模板对象的变量吗？您需要一个事件处理程序来更新会话变量或被动变量，并使动态模板指向该变量。我将补充答案。
Template.shape-dropdown.helpers({
  shapes: [
    { shapetype: "random line", template: "rand_line"},
    ...
  ]
});

Template.shape-dropdown.events({
  'change #shape-select": function(ev){
  var tpl = shapes.filter(function ( obj ) {
    return obj.shape === $('#shape-select').val();
  })[0].template;
  Session.set('template',tpl)
  }
});