Javascript Meteor：在单击时将模板渲染到DOM_Javascript_Meteor

Javascript Meteor：在单击时将模板渲染到DOM

javascript meteor

Javascript Meteor：在单击时将模板渲染到DOM,javascript,meteor,Javascript,Meteor,我遇到了一个看似简单的问题，却无法真正找到解决办法。我有两列：一列是不同任务的概述，另一列是单击每个任务的“更多信息”按钮时应显示任务详细信息的区域。我的逻辑是：有两个模板：task_short和task_long 单击task_short中的按钮时，请使用Blaze.render将task_long渲染到第二列中的一个div 当在另一个任务上单击“更多信息”时，使用Blaze.remove删除视图我的主要问题是：如何告诉Meteor任务中应该呈现哪个任务？task_short通过eac

我遇到了一个看似简单的问题，却无法真正找到解决办法。我有两列：一列是不同任务的概述，另一列是单击每个任务的“更多信息”按钮时应显示任务详细信息的区域。我的逻辑是：

有两个模板：task_short和task_long
单击task_short中的按钮时，请使用Blaze.render将task_long渲染到第二列中的一个div
当在另一个任务上单击“更多信息”时，使用Blaze.remove删除视图

我的主要问题是：如何告诉Meteor任务中应该呈现哪个任务？task_short通过each tasks循环获取其{{content}}、{{name}}etc参数。但是我如何用一个任务来完成它呢？还有，我真的不明白Blaze.remove。从何处获取需要传入的ViewId

我非常感谢你的帮助

这可以通过模板中的会话变量和一些条件来解决。您不需要使用

Blaze.render

Blaze.remove

，除非您正在做一些非常有趣的事情。我不知道你的模板是如何构造的，但这个例子应该能让你知道该怎么做：

app.html

<body>
  {{#each tasks}}
    {{> task}}
  {{/each}}
</body>

<template name="task">
  <div class='short'>
    <p>Here are the short instructions</p>
    <button>More information</button>
  </div>
  {{#if isShowingLong}}
    <div class='long'>
      <p>Here are the long instructions</p>
    </div>
  {{/if}}
  <hr>
</template>

if (Meteor.isClient) {
  Template.body.helpers({
    tasks: function () {
      // return some fake data
      return [{_id: '1'}, {_id: '2'}, {_id: '3'}];
    }
  });

  Template.task.helpers({
    isShowingLong: function () {
      return (this._id === Session.get('currentTask'));
    }
  });

  Template.task.events({
    'click button': function () {
      Session.set('currentTask', this._id);
    }
  });
}