选择下拉列表选项时流星加载模板

Question

我有一个通过这个模板生成的下拉列表，位于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>

它从ranvas.js 中的帮助器获取形状名称：

 Template.shape-dropdown.helpers({
      shapes: [
          { shapetype: "random line"},
          { shapetype: "random quadratic curve"},
          { shapetype: "random bezier curve"},
          { shapetype: "random arc"},
          { shapetype: "random stroke triangle"},
          { shapetype: "random fill triangle"},
          { shapetype: "random stroke rectangle"},
          { shapetype: "random fill rectangle"}
          { shapetype: "random stroke circle"},
          { shapetype: "random fill circle"},
      ]
  });

选择其中一种形状时，我希望一个位于 shape-templates.html中的模板加载。 For example when the "random line" option is selected, I want this template to load:

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

Answer 1

你会想要使用dynamic templates

{{> Template.dynamic template="rand_line"}}

如果您扩展 .shape-dropdown.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 模板中。