Question

我想创建一个表单，根据它所属的模板显示不同的部分。我希望用户输入的数据是被动的：如果用户从一个模板更改为另一个模板，则她之前的条目仍应可见。我打算创建一个“表单”模板，这样我就可以有一个Template.form.events函数，在填写表单时设置相应的Session变量。

我的问题是如何动态填充表单。以下是我试图解决这个问题的方法，但所有字段都会一直显示。

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

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

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

使用Meteor Spacebars创建动态表单

1 个答案: