javascript - Meteor 1.0 この UI 動作と一般的な DOM 操作を実現するにはどうすればよいですか?

Question

チェックボックスを介して (定義済みの) キーワード (「朝食」、「夕食」など) を選択する簡単な方法をユーザーに提供することを目的とした UI コンポーネントを作成したいと考えています。選択したキーワード (カンマ区切り) を表示するか、ユーザーが手動で (新しい) キーワードを追加できるようにするテキスト フィールドがあります。ユーザーが「キーワード」のチェックを外すと、対応するエントリがテキスト フィールドから削除されます。ユーザーが現在の画面を終了し、後で戻ってきた場合でも、以前に選択したキーワードをチェックする必要があります。

これまでのところ、私はテンプレートを持っています：

<template name="mealTypeControls">
  <input type="text" id="meal-type-display" class="multi-keyword-selection--display form-control" value="{{selectedTypes}}" placeholder="{{selectedTypes}}">
  <ul class="multi-keyword-selection--list">
    {{#each mealTypes}}
    <li class="multi-keyword-selection--item">
        <input type="checkbox" class="meal-type-item" id="{{id}}" value="{{id}}">
        <label for="{{id}}">{{name}}</label>
    </li>
    {{/each}}
  </ul>
</template>

そしてテンプレートマネージャー

var mealTypeArray = [
{id: 'breakfast', name: 'Breakfast'},
{id: 'lunch', name: 'Lunch'},
{id: 'tea', name: 'Tea'},
{id: 'snack', name: 'Snack'},
{id: 'dinner', name: 'Dinner'}
];
Template.mealTypeControls.helpers({
  mealTypes: mealTypeArray,
  selectedTypes: function(){
      return Session.get('selectedTypesString');
  }
});
Template.mealTypeControls.events({
  'change .meal-type-item': function(event, template){
      if ($(event.target).is(':checked')){
          var selectedType = event.target.value;
          Session.set(
            'selectedTypesString', template.$('#meal-type-display').val() + ', ' + selectedType
          );
      }
  }
});

私はMeteorを初めて使用するので、質問は、一般的なアプローチが何らかの意味があるように見えるかどうかです? 「チェックを外すと表示フィールドからキーワードを削除する」機能を正しく実現するにはどうすればよいですか? 次にビュー全体が作成されるまで、コンポーネントの最新の状態をどのように保存できますか?

MeteorでDOM操作やフォームデータ転送を実際に行うには？Template オブジェクトを介して jQuery または DOM 操作を使用するのはいつですか? $(event.target).is(':checked')if ステートメントで使用するのに少し苦労していますが、後でevent.target.valueチェックボックスの値にアクセスするために使用する必要があり、Meteor での DOM 操作に関してかなり混乱しています。

あなたのヒント、助け、ベストプラクティスは大歓迎です。乾杯、ブンジプ