Meteorチュートリアル〜リアクティブディクショナリに一時的な状態を保存〜

ReactiveDict

ReactiveDictを使用すると、クライアントで一時的なリアクティブ状態を保存することができる。キーと値を持つ通常のJSオブジェクトと似ているが、反応性が組み込まれている。

これまでは、すべての状態をコレクションに格納しており、これらのコレクション内のデータを変更すると、ビューは自動的に更新された。これは、Mongo.CollectionがリアクティブデータソースとしてMeteorに認識されるため。つまり、Meteorは内部のデータがいつ変更されたかを知っている。

ReactiveDictは同じ方法だが、コレクションと同様にサーバーと同期されない。これにより、ReactiveDictは上記のチェックボックスのような一時的なUI状態を保存するのに便利。コレクションと同様、ReactiveDict変数が変更されたときにテンプレートを更新するための特別なコードを書く必要はない。ヘルパー内でinstance.state.get（...）を呼び出すだけ。

import { Template } from 'meteor/templating';
import { ReactiveDict } from 'meteor/reactive-dict';

import { Tasks } from '../api/tasks.js';

import './task.js';
import './body.html';

Template.body.onCreated(function bodyOnCreated() {
  this.state = new ReactiveDict();
});

Template.body.helpers({
  tasks() {
    // Show newest tasks at the top

    // Clear form
    target.text.value = '';
  },
  'change .hide-completed input'(event, instance) {
    instance.state.set('hideCompleted', event.target.checked);
  },
});

Template.body.helpers({
  tasks() {
    const instance = Template.instance();
    if (instance.state.get('hideCompleted')) {
      // If hide completed is checked, filter tasks
      return Tasks.find({ checked: { $ne: true } }, { sort: { createdAt: -1 } });
    }
    // Otherwise, return all of the tasks
    return Tasks.find({}, { sort: { createdAt: -1 } });
  },
});

TODOリストのチェックがまだ付いていない項目を数えるためには

    // Otherwise, return all of the tasks
    return Tasks.find({}, { sort: { createdAt: -1 } });
  },
  incompleteCount() {
    return Tasks.find({ checked: { $ne: true } }).count();
  },
});

Template.body.events({

<body>
  <div class="container">
    <header>
      <h1>Todo List ({{incompleteCount}})</h1>

      <label class="hide-completed">
        <input type="checkbox" />

canpaku / study_record

Meteorチュートリアル〜リアクティブディクショナリに一時的な状態を保存〜 #8

ReactiveDict