流星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]); 
}