Javascript 使用meteor和Aldeed'进行动态形状概括和去除；s自动成型

我正在使用meteor和Aldeed的autoform来填充我的数据库。 我想要实现的基本功能是：

• 将主体窗体作为常规链接到集合
• 在主窗体中，有一个按钮

  addsecondary

  ，可动态添加链接到不同集合的窗体
• 第二个表单有一个

  remove

  按钮，可以将其删除

我遵循了概述的技术，并编写了以下代码：

        <template name="PricipalForm">

        {{#autoForm collection="principal" id="Principalform" type="insert" }}
            <fieldset>
                <legend>Principal form</legend>
                {{> afQuickField name='field1'}}
                {{> afQuickField name='field2'}}
                <button id='add-inputs' type="button">
                        Add Proposal
                 </button>

                 {{#each inputs}}
                        {{> AddSecond}}
                 {{/each}}

            </fieldset>
            <button type="submit" class="btn btn-primary">Insert</button>
        {{/autoForm}}
    </template>

./Templates/PrincipalForm.html

//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

Template.PrincipalForm.onCreated(function() {
   Session.set('props', []);
 });


  Template.Create.events({
     'click #add-inputs': function () {
      var inputs = Session.get('inputs');
      var uniqid = Math.floor(Math.random() * 100000); /
      inputs.push({uniqid: uniqid});
      Session.set('inputs', inputs);
      }
  });

  Template.Create.helpers({
      inputs: function(){
         return Session.get('inputs');
       }
   });


./Templates/PrincipalForm.js


 ////////////////////////////////////////////////////
 ///////////////////////////////////////////////////


 <template name ="SecondaryFrom">

     {{#autoForm collection="secondary" id="secondaryForm" type="insert" }}
      <fieldset>
       <legend> One instance of secondary form </legend>
          {{> afQuickField name='fieldA'  }}
          {{> afQuickField name='fieldB'}}
      </fieldset>
      <button class='remove-inputs' uniqid="{{uniqid}}" type="button">Remove</button>
{{/autoForm}}

</template>


  ./Templates/SecondaryForm.html

  //////////////////////////////////////////
  //////////////////////////////////////////

  Template.AddProposal.events({
     'click .remove-inputs': function(event) {
         var uniqid = $(event.currentTarget).attr('uniqid');
         var props = Session.get('inputs');
         props = _.filter(props, function(x) { return x.uniqid != uniqid; });
         Session.set('inputs', inputs);
          },

   });


  ./Templates/SecondaryForm.js

{{{#autoForm collection=“principal”id=“Principalform”type=“insert”}
主要形式
{{>afquickfieldname='field1'}
{{>afquickfieldname='field2'}
添加建议
{{{#每个输入}
{{>AddSecond}
{{/每个}}
插入
{{/autoForm}
./Templates/PrincipalForm.html
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
Template.PrincipalForm.onCreated（函数（）{
Session.set（'props'，[]）；
});
Template.Create.events({
“单击#添加输入”：函数（）{
var inputs=Session.get（'inputs'）；
var uniqid=Math.floor（Math.random（）*100000）/
push（{uniqid:uniqid}）；
Session.set（'输入'，输入）；
}
});
Template.Create.helpers({
输入：函数（）{
return Session.get（'inputs'）；
}
});
./Templates/PrincipalForm.js
////////////////////////////////////////////////////
///////////////////////////////////////////////////
{{{#autoForm collection=“secondary”id=“secondaryForm”type=“insert”}
二级形式的一个实例
{{>afquickfieldname='fieldA'}
{{>afquickfieldname='fieldB'}
去除
{{/autoForm}
./Templates/SecondaryForm.html
//////////////////////////////////////////
//////////////////////////////////////////
Template.AddProposal.events({
“单击。删除输入”：函数（事件）{
var uniqid=$（event.currentTarget.attr（'uniqid'）；
var props=Session.get（'inputs'）；
props=qid.filter（props，函数（x）{return x.uniqid！=uniqid；}）；
Session.set（'输入'，输入）；
},
});
./Templates/SecondaryForm.js

这段代码运行良好，只有一个bug我不理解：

• 我首先添加了三个二级表单，并将这三个表单的值分别放入

  abc

  、

  efg

  、

  hij

• 然后我用

  efg

  删除了第二个二级表单，我得到的是剩下的是

  abc

  和

  efg

• 更奇怪的是，当我检查被删除表单的

  uniqid

  时，它是预期的（并且对应于前面的

  efg

  ）

因此，当我动态删除表单时，我键入的值似乎会以某种方式保留下来

请任何人帮忙：

• 我正在做的事情出了什么问题，我该如何解决
• 也许有更好的方法来做我想做的事情吗

我也试着核对答案 ，但提供的链接已断开

---

谢谢

我通过完全使用

aldeed:autoform

和

aldeed:collection2

来生成我的表单，而不是手动插入辅助模板，从而解决了这个问题

这可以通过像往常一样创建两个想要的模式，然后将辅助模式作为数组放到主模式上来实现

然后是在autoform中使用

{{>afArrayfield}

以实现问题中概述的预期结果的问题

代码将如下所示：

//Schema definition:  
Primary = new Mongo.collection('Primary');
secondary = new SimpleSchema({
   /* ... */
 });
 primary = new SimpleSchema({
   /*...*/
  secondaries:{
   type:[secondary]
  }
 });

Primary.attachSchema(primary);

//On the HTML form:
{{autoform collection="Primary" id= "form_example" type="insert"}}
<fieldset>
   /* any fields*/
   {{afArrayField name = 'secondaries'}}
</fieldset>
{{/autoform}}

//架构定义：
Primary=新的Mongo.集合（“Primary”）；
二级=新的SimpleSchema({
/* ... */
});
primary=新的SimpleSchema({
/*...*/
二级：{
类型：[辅助]
}
});
初级。附件模式（初级）；
//在HTML表单上：
{{autoform collection=“Primary”id=“form_example”type=“insert”}
/*任何领域*/
{{afArrayField name='secondaries'}}
{{/autoform}

我通过完全使用

aldeed:autoform

和

aldeed:collection2

来生成我的表单，而不是手动插入辅助模板，从而解决了这个问题

这可以通过像往常一样创建两个想要的模式，然后将辅助模式作为数组放到主模式上来实现

然后是在autoform中使用

{{>afArrayfield}

以实现问题中概述的预期结果的问题

代码将如下所示：

//Schema definition:  
Primary = new Mongo.collection('Primary');
secondary = new SimpleSchema({
   /* ... */
 });
 primary = new SimpleSchema({
   /*...*/
  secondaries:{
   type:[secondary]
  }
 });

Primary.attachSchema(primary);

//On the HTML form:
{{autoform collection="Primary" id= "form_example" type="insert"}}
<fieldset>
   /* any fields*/
   {{afArrayField name = 'secondaries'}}
</fieldset>
{{/autoform}}

//架构定义：
Primary=新的Mongo.集合（“Primary”）；
二级=新的SimpleSchema({
/* ... */
});
primary=新的SimpleSchema({
/*...*/
二级：{
类型：[辅助]
}
});
初级。附件模式（初级）；
//在HTML表单上：
{{autoform collection=“Primary”id=“form_example”type=“insert”}
/*任何领域*/
{{afArrayField name='secondaries'}}
{{/autoform}