流星templete動態添加到另一個模板

Question

如何在我們單擊按鈕時動態地將模板添加到另一個模板。請幫幫我。請儘可能給我舉個例子。

<template name="temp1"> 
<table> 
<tr> 

    <td><input class="btn btn-success" type="submit" name="submit" id="add" value="add"/></td>      

</td>  
</tr> 
</table> 
</template> 

<template name="temp2"> 
<input type="text" value="" name='inp1'/> 
</template> 

當我們點擊temp1中的添加按鈕時，我們需要將temp2添加到temp1.Please幫助我。

Answer 1

多種方式來做到這一點，只有一種解釋在你的js

...

Template.temp1.events({ 
    "click #add": function (event, template) { 
    Session.set("showtemp2", true); 
    }, 
}); 

Template.temp1.helpers({ 
    showtemp2: function(){ 
    return Session.get("showtemp2"); 
    } 
}); 

在HTML

<template name="temp1"> 
<table> 
<tr> 

    <td><input class="btn btn-success" type="submit" name="submit" id="add" value="add"/></td>      

</td>  
</tr> 
</table> 
{{#if showtemp2}} 
{{> temp2}} 
{{/if}} 
</template> 

Answer 2

看一看Blaze.renderWithData。它允許您在DOM中的任何位置呈現模板。您需要爲調用它的temp1添加一個事件映射。記得給你的表中的ID（myTable）：

Template.temp1.events({ 
    "click #add": function (evt) { 
    Blaze.renderWithData("temp2", "data", $('table#myTable'), "temp1") 
    }, 
}); 

Answer 3

一起來看流星1.0，有一個叫Template.dynamic內置幫手： https://docs.meteor.com/#/full/template_dynamic

{{> Template.dynamic template=dynTemp [data=data] }} 

您可以輕鬆地設置dynTemp變量可以使用Session變量進行被動設置。也許是這樣的：

Template.yourTemplate.dynTemp = function() { 
    return Session.get("dynTemp", "templateToRender"); 
} 

希望它能幫助:)

Answer 4

您也可以使用下面的代碼上按一下按鈕：

'click .myButton': function() { 
    // empty the element where you want to insert your template. 
    $('#myDomElement').empty(); 

    //insert the template 
    UI.render(Template.Mytemplate, $("#myDomElement")[0]); 
}