i'm building app meteor.js, , i've got form able allow user add new row form when click button (button.addexperience). i'm using html template populate each row of form.
how have template (experiencerow) rendered each time user clicks button?
see example code below:
<body> <form> {{> experiencerow }} </form> <button class="addexperience">add experience</button> </body> <template name="experiencerow"> <div id={{experiencenumber}} class='experiencerow'> <input type="text" placeholder="name" value="" class="name"> <input type="text" placeholder="address" value="" class="address"> <input type="text" placeholder="phone" value="" class="phone"> </div> </template>
you need use each block along reactive variable. variable reactivevar, session varaible, local collection, etc. here's example implementation using reactivevar hold array of ids:
html
<body> {{> experienceform }} </body> <template name="experienceform"> <form> {{#each experienceids}} {{> experiencerow }} {{/each}} </form> <button class="addexperience">add experience</button> </template> <template name="experiencerow"> <div id={{this}} class='experiencerow'> <input type="text" placeholder="name" value="" class="name"> <input type="text" placeholder="address" value="" class="address"> <input type="text" placeholder="phone" value="" class="phone"> </div> </template> js
template.experienceform.oncreated(function() { this.experienceids = new reactivevar(random.id()); }); template.experienceform.helpers({ experienceids: function() { return template.instance().experienceids.get(); } }); template.experienceform.events({ 'click .addexperience': function(e, template) { e.preventdefault(); var ids = template.experienceids.get(); ids.push(random.id()); template.experienceids.set(ids); } }); note you'll need meteor add reactive-var work.
recommended reading: scoped reactivity.
Comments
Post a Comment