2016-07-26 59 views
0

我是Meteor的新手。每当我点击按钮时,我想插入一个新表格。我在一个模板中实现了表格,但我不确定如何每次单击按钮时插入模板的实例。插入模板instncaes点击事件meteorjs

HTML

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

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) 
    } 
}) 

我想要的效果是点击一次按钮后,一个{{> Table}}可以在HTML <button type="button" id="addTables" class="btn btn-default" aria-label="Left Align">之前插入。任何人都有想法如何做到这一点?非常感谢!

回答

1

这是随时可以使用的代码,只需调整表格和行样式根据您的要求。

Template.table.events({ 
 
\t 'click #addRow'(e,t){ 
 
\t \t let table = t.find('.table');; 
 
\t \t Blaze.render(Template.row,table); 
 
\t } 
 
})
<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>[email protected]</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>[email protected]</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</template>

在这里我们利用Blaze.render的这需要你想未来和表作为父表来呈现一行。

你可以使用t.find()来为模板中的类寻找表。

+0

嗨!谢谢回复。但是我仍然对如何在代码中精确插入一个模板实例(这里实际上是一个表格)感到困惑。 – yiyizheliu