在下拉列表中選擇

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模板中作爲動態助手的參數。