简体   繁体   English

单击事件meteorjs时插入模板实例

[英]Insert template instncaes on clicking event meteorjs

I'm a newbie to Meteor. 我是流星的新手。 I want to insert a new table every time when I click on the button. 我想在每次单击按钮时插入一个新表。 I implemented the table in a template but I'm not sure how to insert an instance of the template every time clicking on the button. 我在模板中实现了表格,但是我不确定每次单击按钮时如何插入模板的实例。

html html

<template name="addTable">
  <button type="button" id="addTables" class="btn btn-default" aria-label="Left Align">
</template>

js js

Template.addTable.events({
   'click #addTables': function(e){
       var button = $(e.currentTarget);
       button.before(//I want to add code here to insert one instance of template Table here)
    }
})

The effect I want is after clicking on the button once, one {{> Table}} can be inserted before <button type="button" id="addTables" class="btn btn-default" aria-label="Left Align"> in html. 我想要的效果是单击一次按钮后,可以在<button type="button" id="addTables" class="btn btn-default" aria-label="Left Align">之前插入一个{{> Table}} <button type="button" id="addTables" class="btn btn-default" aria-label="Left Align">在HTML中。 Anyone has idea how to do this? 有人知道该怎么做吗? Thanks a lot! 非常感谢!

This is ready to use code, just adjust the table and row styling as per your requirement. 这是准备使用的代码,只需根据需要调整表和行的样式。

 Template.table.events({ 'click #addRow'(e,t){ let table = t.find('.table');; Blaze.render(Template.row,table); } }) 
 <body> {{> table}} </body> <template name="table"> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr id="myRow"> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr><br> </tbody> </table> <button class="btn btn-warning pull-right" id="addRow">Add Row</button> </template> <template name="row"> <table class="table"> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> </tbody> </table> </template> 

here we are making use of Blaze.render which takes the row you want to render next and table as the parent table. 在这里,我们利用Blaze.render,它将下一个要渲染的行和表作为父表。

you can assign the table using t.find() which finds for the class inside template. 您可以使用t.find()分配表,该表在模板中查找该类。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM