Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

在我的事件处理程序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';导入它。

单击Meteor按钮时显示数据

1 个答案: