【问题标题】：dynamically inserting templates in meteor在流星中动态插入模板
【发布时间】：2015-09-13 13:33:38
【问题描述】：

好的，我将模板放在自己的名为 myApp.html 的文件中。我的模板代码如下

<template name="initialInsertion">
  <div class="greeting">Hello there, {{first}} {{last}}!</div>
</template>

现在我想在单击按钮时将此模板插入 DOM。我已经在 DOM 中呈现了我的按钮，并且我有一个与其相关的点击事件，如下所示

Template.chooseWhatToDo.events = {
  'click .zaButton':function(){
     Meteor.ui.render(function () {
       $("body").append(Template.initialInsertion({first: "Alyssa", last: "Hacker"}));
     })
  }
}

现在显然 $("body").append 部分是错误的，但返回 Template.initialInsertion... 不会将该模板插入到 DOM 中。我试过放一个partia {{> initialInsertion}}，但这只是错误，因为我还没有第一组和最后一组......任何线索？谢谢大家

【问题讨论】：

标签： meteor

【解决方案1】：

在流星 1.x 中

'click .zaButton':function(){
   Blaze.renderWithData(Template.someTemplate, {my: "data"}, $("#parrent-node")[0])
 }

在流星 0.8.3

'click .zaButton':function(){
   var t = UI.renderWithData(Template.someTemplate, {my: "data"})
   UI.insert(t, $(".some-parrent-to-append"))
 }

【讨论】：

【解决方案2】：

first 和 last 最终会进入 Meteor.Collection 吗？

如果没有，我知道的最简单的方法是将数据放入会话中：

Template.chooseWhatToDo.events = {
    'click .zaButton' : function () {
         Session.set('first', 'Alyssa');
         Session.set('last', 'Hacker');
    }
}

然后你会定义：

Template.initialInsertion.first = function () {
  return Session.get('first');
}

Template.initialInsertion.last = function () {
  return Session.get('last');
}

Template.initialInsertion.has_name = function () {
  return Template.initialInsertion.first() && Template.initialInsertion.last();
}

最后，像这样调整你的 .html 模板：

<template name="initialInsertion">
    {{#if has_name}}
        <div class="greeting">Hello there, {{first}} {{last}}!</div>
    {{/if}}
</template>

这是与您的问题完全相反的解决方案，但它似乎是“流星方式”。（基本上，不用担心自己操作 DOM，只需包含会话、集合和模板系统。）顺便说一句，我还是 Meteor 的新手，所以如果这不是“Meteor 方式”，请告诉我:-)

【讨论】：

是的，它认为你是对的。会话处理是我的应用程序中缺少的东西，但我想这是它发挥作用的地方之一。感谢您的帮助！

【解决方案3】：

我认为您可能希望在附加语句中使用 Meteor.render。另外，请注意，如果要将数据传递到模板中，则必须将 Template.initialInsertion 包装在匿名函数中，因为这是 Meteor.render 所期望的。我正在做一些似乎有效的类似事情：

Template.chooseWhatToDo.events = {
  'click .zaButton':function(){
    $("body").append(Meteor.render(function() {
      return Template.initialInsertion({first: "Alyssa", last: "Hacker"})
    }));
  }
}

希望这会有所帮助！

【讨论】：

这是一个 jQuery 选择器吗？
是的，这是一个 jquery 选择器，虽然这种方法有效，但它并不是真正的 Meteor 方式 - 请参阅 Josh 的答案以获得更好的方法

【解决方案4】：

这里的许多答案都会遇到新的 Blaze 引擎的问题。这是一个在 Meteor 0.8.0 中使用 Blaze 的模式。

//HTML
<body>
  {{>mainTemplate}}
</body>

//JS Client Initially
var current = Template.initialTemplate;
var currentDep = new Deps.Dependency;

Template.mainTemplate = function()
{
  currentDep.depend();
  return current;
};

function setTemplate( newTemplate )
{
    current = newTemplate;
    currentDep.changed();
};

//Later
setTemplate( Template.someOtherTemplate );

更多信息见Meteor docs这部分

【讨论】：