javascript - 使用 Meteor 单击按钮时显示数据

Question

我有一个按钮，当我点击时我只想在复选框的值为真时显示数据，如果为假，则在创建 DOM 时显示但我不能请看我的代码。

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>

在我的事件处理程序中 click .all 如果我尝试 return students.find() 它不起作用。

Answer 1

最简单的方法是使用 ReactiveVar 来标记列表是否应该像这样显示:

将 ReactiveVar 添加到您的模板实例

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

然后用一个助手暴露它:

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

在你的模板中，测试标志

<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>

并添加仅切换状态的事件处理程序(即设置为与当前状态相反):

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

如果你还没有得到它，运行 meteor add reactive-var 来获取包。

如果您使用导入，请使用 import { ReactiveVar } from 'meteor/reactive-var'; 导入它。