Question

我对Meteor很陌生，很享受它并正在制作一些测试应用来培养我的技能。

我想添加一个允许动态添加电话号码字段的表单。我的想法是我将一个公司添加到集合/数据库中，一个公司可能有0个电话号码，另一个可能有3个，另一个可能有20个。所以我希望能够按下说，一个PLUS按钮或类似，并在HTML中显示输入字段。

我已经开始讨论会议，并认为它们可能是这个难题的关键。

到目前为止，我有以下内容（对于应用程序的这一部分）：

我的HTML模板：

<template name="organisationAddForm">
    <h3>Add a new organisation</h3>
    <form name="addForm">
        <div class="row">
            <div class="col-sm-4 col-lg-1">
                <p>Name</p>
            </div>
            <div class="col-sm-4 col-lg-1">
                <input type="input" name="newOrgName" placeholder="Organisation Name">
            </div>
        </div>

            {{> addPhoneNumber}}

        <div class = "row">
         <div class="col-sm-4 col-lg-1">
             <input type="submit" value="Add Organisation">
         </div>
        </div>
    </form>
</template>

和

<template name="addPhoneNumber">
    <h4>Phone Numbers</h4>

    <ul>
        {{#each phoneNumber}}
            <li>Number: {{number}} </li>
        {{/each}}
    </ul>

    <a href = "#" class ="add-phone"> [ Add Phone Number ]</a>
</template>

到目前为止，我的Javascript还不完整，因为我有点卡住了：

Template.addPhoneNumber.events({
  // when user clicks the Add Phone link
  'click .add-phone': function(event){
    event.preventDefault();
  }
});

以上的想法是：

1-用户点击添加电话链接，该链接将为会话添加值 2-每个循环将循环遍历会话数据并重新绘制表单，但会话数据告诉它绘制的输入数量很多。

我希望这是有道理的，并且它足够集中。

我不是要求任何人为我编写代码，更多的是帮助我指导方向（这是正确的方向吗？）以及如何解决问题的建议。我想学习编程并且在这方面做得更好，我很高兴能够做到这一点。这让我陷入困境，所以我在这里。： - ）

任何建议都非常感谢。

罗布

使用Meteor动态添加HTML表单元素

0 个答案: