CODEWITHSUNDEEP
javascripthtmlcssmeteormeteor-blaze
KolaCaine
KolaCaine

Reputation: 2187

Display data when click on button with Meteor

I have one button, when I click I want to display data only if the value of the checkbox is true, If it false, it's display when DOM is created But I can't please look my code. 

Template.students.helpers({
  all_students: () => {
    return students.find();
  }
});

Template.body.onCreated(() => {
  Meteor.subscribe('students');
});
                
Template.students.events({
  'submit .insert': (e) => {
    e.preventDefault();
    students.insert({
      name: e.target[0].value,
      age: e.target[1].value,
      check: false
    });
    this._checkValue(e);
  },
  'click .is-delete': (e) => {
    students.remove(e.currentTarget.id);
  },
  'click .check-checkbox': (e) => {
    students.update(e.currentTarget.id, {
      $set: {
        check: !this.check
      }
    })
  },
  'click .all': () => {
    // HERE
  }
})
<template name="students">
  <div class="content menu">
    <ul>
      <button class="ui button all">All list</button> <!-- THIS BUTTON -->
      {{#each all_students}}
        <li class="content-list" id="{{ _id }}">

          <div class="name">{{ name }}</div>
          <div class="age">{{ age }} ans</div>
          <span id="{{ _id }}" class="delete is-delete"></span>
          <div class="ui checkbox">
            <input id="{{ _id }}" class="check-checkbox" type="checkbox" name="check">
          </div>
        </li>
      {{/each}}
    </ul>
  </div>
</template>

Inside of my event handler click .all if I try to return students.find() it doesn't work.

Upvotes: 0

Views: 336

Answers (1)

coagmano
coagmano

Reputation: 5671

The easiest way is to use a ReactiveVar to flag if the list should show like so:

Add the ReactiveVar to your template instance

Template.students.onCreated(() => {
    this.showAllStudents = new ReactiveVar(false);
    this.subscribe('students');
});

Then expose it with a helper:

Template.students.helpers({
  showStudents() {
    Template.instance().showAllStudents.get();
  },
  all_students() {
    students.find();
   };
});

In your template, test for the flag

<template name="students">
  <div class="content menu">
    <ul>
      <button class="ui button all">All list</button> <!-- THIS BUTTON -->
      {{#if showStudents}}
        {{#each all_students}}
            <li class="content-list" id="{{ _id }}">

            <div class="name">{{ name }}</div>
            <div class="age">{{ age }} ans</div>
            <span id="{{ _id }}" class="delete is-delete"></span>
            <div class="ui checkbox">
                <input id="{{ _id }}" class="check-checkbox" type="checkbox" name="check">
            </div>
            </li>
        {{/each}}
      {{/if}}
    </ul>
  </div>
</template>

And add the event handler which just switches the state (ie. set opposite of current state):

Template.students.events({
  'click .all': (event, instance) => {
    instance.showAllStudents.set(!instance.showAllStudents.get());
  }
})

If you haven't already got it, run meteor add reactive-var to get the package.

And if you're using imports, use import { ReactiveVar } from 'meteor/reactive-var'; to import it.

Upvotes: 1

Related Questions