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中的模板。例如，当选择“随机行”选项时，我希望加载此模板：

<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模板中。

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

1 个答案: