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中的添加按钮时，我们需要在temp1中附加temp2。请帮助我。

Answer 1

看看Blaze.renderWithData。它允许您在DOM中的任何位置呈现模板。您需要为调用它的temp1添加事件映射。请记得为您的表格提供一个ID（myTable）：

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

Answer 2

您也可以点击按钮使用以下代码：

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

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

Answer 3

多种方式，但一种方式

在你的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 4

使用Meteor 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");
}

希望有所帮助：）

meteor templete动态添加到另一个模板

4 个答案: