在流星1.x

Question

好的，所以我的模板名为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 part是错误的，但返回Template.initialInsertion ...不会将该模板插入DOM。我试过放一个partia {{＆gt; initialInsertion}}但这只是错误，因为我没有第一次和最后一次设置......任何线索？谢谢你们

Answer 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"))
 }

Answer 2

最后是最后一次进入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方式”，请有人告诉我： - ）

Answer 3

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

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

希望这有帮助！

Answer 4

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

//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

这个部分的更多信息

在流星中动态插入模板

4 个答案:

在流星1.x

在流星0.8.3