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