CODEWITHSUNDEEP
javascriptmeteor
Valentin Zambelli
Valentin Zambelli

Reputation: 149

Meteor: Render a template to the DOM on click

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. My logic is:

My main problem is: How do I tell Meteor which task should be render in task_long? task_short gets its {{content}},{{name}} etc parameters through the each tasks loop. But how do I do it with a single task? Also, I don't really understand Blaze.remove. Where do I get the ViewId from that needs to be passed in?

I am insanely grateful for any help!

Upvotes: 0

Views: 871

Answers (1)

David Weldon
David Weldon

Reputation: 64342

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. I don't know exactly how your template is structured, but this example should give you and idea of what to do:

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

Upvotes: 2

Related Questions