使用 Meteor 空格键创建动态表单答案

【问题标题】：Creating a dynamic form with Meteor Spacebars使用 Meteor 空格键创建动态表单
【发布时间】：2015-12-30 01:58:39
【问题描述】：

我想创建一个表单，根据它所属的模板显示不同的部分。我希望用户输入的数据具有反应性：如果用户从一个模板更改为另一个模板，她之前的条目应该仍然可见。我计划创建一个“表单”模板，这样我就可以拥有一个Template.form.events 函数，该函数将在填写表单时设置适当的会话变量。

我的问题是关于如何动态填充表单。这是我尝试解决此问题的方法，但所有字段始终出现。

<body>
  {{> form1}}
  {{> form2}}
  <h1>Log in</h1>
  {{> form name=1 password=1}}
</body>

<template name="form1">
  {{#form name=1 species=1}}
    <h1>Form 1</h1>
  {{/form}}
</template>

<template name="form2">
  <h1>Form 2</h1>
  {{>form name=1 planet=1 asMenu=1}}
</template>

<template name="form">
  {{#if name=1}}
    <input type="text" name="name" placeholder="Name" value="">
  {{/if}}
  {{#if species=1}}
    <input type="text" name="species" placeholder="Species" value="">
  {{/if}}
  {{#if planet=1}}
    {{#if asMenu=1}}
      <select name="">
        <option value="Erth">Erth</option> 
        <option value="Othr">Othr</option>
      </select>
    {{else}}
      <input type="text" name="planet" placeholder="Planet" value="">
    {{/if}}
  {{/if}}
  {{#if password=1}}
    <input type="password" name="password" value="">
  {{/if}}
  <br />
  <button type="submit">Submit</button>
</template>

你能帮我理解如何解决这个问题吗？

【问题讨论】：

标签： meteor meteor-blaze spacebars

【解决方案1】：

首先，空格键不支持比较，所以{{#if var=1}} 是无效的语法。但是 1 是 true，所以我将利用它来将 {{#if name=1}} 替换为 {{#if name}}：

<body>
  {{> form1}}
  {{> form2}}
  <h1>Log in</h1>
  {{> form name=1 password=1}}
</body>

<template name="form1">
  <h1>Form 1</h1>
  {{>form name=1 species=1}}
</template>

<template name="form2">
  <h1>Form 2</h1>
  {{>form name=1 planet=1 asMenu=1}}
</template>

<template name="form">
  {{#if name}}
    <input type="text" name="name" placeholder="Name" value="">
  {{/if}}
  {{#if species}}
    <input type="text" name="species" placeholder="Species" value="">
  {{/if}}
  {{#if planet}}
    {{#if asMenu}}
      <select name="">
        <option value="Erth">Erth</option> 
        <option value="Othr">Othr</option>
      </select>
    {{else}}
      <input type="text" name="planet" placeholder="Planet" value="">
    {{/if}}
  {{/if}}
  {{#if password}}
    <input type="password" name="password" value="">
  {{/if}}
  <br />
  <button type="submit">Submit</button>
</template>

【讨论】：

While processing files with templating (for target web.browser): reuse.html:11: Unexpected closing template tag ...rm 1</h1> {{/form}}
抱歉，忘记删除不应该存在的{{/form}} 结束标签。