流星：单击时将模板渲染到DOM

Question

I am having a seemingly simple problem that I cannot really find a solution to. 我遇到了一个看似简单的问题，但我找不到真正的解决方案。 I have 2 columns: One with an overview of different tasks, and one with an area where detailed information about a task should be displayed when the "More information" button attached to each task is clicked. 我有2列：一栏概述了不同的任务，一栏则是单击每个任务所附的“更多信息”按钮时应显示有关该任务的详细信息的区域。 My logic is: 我的逻辑是：

Have 2 templates: task_short and task_long 有2个模板：task_short和task_long
When the button in task_short is clicked use Blaze.render to render task_long to a div in the second column. 单击task_short中的按钮后，使用Blaze.render将task_long渲染为第二列中的div。
when "More information" is clicked on another task_short, use Blaze.remove to remove the view. 当在另一个task_short上单击“更多信息”时，使用Blaze.remove删除视图。

My main problem is: How do I tell Meteor which task should be render in task_long? 我的主要问题是：如何告诉Meteor应该在task_long中呈现哪个任务？ task_short gets its {{content}},{{name}} etc parameters through the each tasks loop. task_short通过每个任务循环获取其{{content}}，{{name}}等参数。 But how do I do it with a single task? 但是，我该如何完成一项任务？ Also, I don't really understand Blaze.remove. 另外，我不太了解Blaze.remove。 Where do I get the ViewId from that needs to be passed in? 我需要从哪里传递ViewId？

I am insanely grateful for any help! 我非常感谢您的帮助！

Answer 1

This can be solved with a session variable and some conditionals in your template. 这可以通过会话变量和模板中的一些条件来解决。 You shouldn't need to use Blaze.render / Blaze.remove unless you are doing something really fancy. 除非您确实在做一些花哨的事情，否则您无需使用Blaze.render / Blaze.remove 。 I don't know exactly how your template is structured, but this example should give you and idea of what to do: 我不知道您的模板的确切结构，但是此示例应为您提供如何做的想法：

app.html 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 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);
    }
  });
}

流星：单击时将模板渲染到DOM

问题描述

1 个解决方案

解决方案1
2 2014-11-17 19:19:42

app.html app.html

app.js app.js

流星：单击时将模板渲染到DOM

问题描述

1 个解决方案

解决方案1 2 2014-11-17 19:19:42

app.html app.html

app.js app.js

解决方案1
2 2014-11-17 19:19:42