javascript - Meteor：点击时将模板渲染到DOM - Thinbug

Meteor：点击时将模板渲染到DOM

时间：2014-11-17 19:02:52

标签： javascript meteor

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

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

我的主要问题是：如何告诉Meteor在task_long中应该渲染哪个任务？ task_short通过每个任务循环获取其{{content}}，{{name}}等参数。但是我如何用一个任务完成它？另外，我真的不了解Blaze.remove。我从哪里获取需要传递的ViewId？

我非常感激任何帮助！

1 个答案:

答案 0 :(得分：2)

这可以通过会话变量和模板中的一些条件来解决。您不应该使用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>

app.js

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);
    }
  });
}