[英]Dynamic form generalion and removal using meteor and Aldeed's autoform
I am using meteor and Aldeed's autoform to populate my database. 我正在使用meteor和Aldeed的autoform来填充我的数据库。 The basic functionality I want to achieve is this:
我想要实现的基本功能是:
add secondary
which dynamically adds forms linked to a different collection. add secondary
,它动态添加链接到不同集合的表单。 remove
button which removes it. remove
按钮,删除它。 I followed the technique outlined here and put together the following code : 我按照这里概述的技术并将以下代码放在一起:
<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
This code works fine, there is only one bug that I do not understand: 这段代码工作正常,只有一个我不明白的bug:
abc
, efg
, hij
in fieldA
of these three forms respectively. abc
, efg
, hij
中fieldA
分别这三种形式。 efg
and what I get is that the remaining ones are abc
and efg
!! efg
删除第二个二级形式,我得到的是其余的是abc
和efg
!! uniqid
of the removed form is the one expected (and corresponding to the previous efg
). uniqid
是预期的那个(并且对应于之前的efg
)。 So it seems that when I remove the form dynamically, the values that I type in persist somehow. 因此,当我动态删除表单时,我输入的值会以某种方式持久存在。
Can anyone please help out: 任何人都可以帮忙:
I also tried to check the answer here , but the links provided were broken. 我也尝试在这里查看答案,但提供的链接已被破坏。
Thanks 谢谢
I solved the issue by fully using aldeed:autoform
and aldeed:collection2
in order to generate my form rather than inserting the secondary template manually. 我通过完全使用
aldeed:autoform
和aldeed:collection2
来解决这个问题,以便生成我的表单而不是手动插入辅助模板。
This can be achieved by creating the two wanted schemas as usual and then putting the secondary schema as an array onto the primary. 这可以通过像往常一样创建两个所需的模式,然后将二级模式作为数组放到主模式上来实现。
Then it is a question of using {{> afArrayfield}}
in autoform to achieve the intended result outlined in the question. 然后,这是一个在
{{> afArrayfield}}
中使用{{> afArrayfield}}
来实现问题中概述的预期结果的问题。
The code would then look like this: 代码将如下所示:
//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}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.