Meteor 1.0 Как реализовать это поведение пользовательского интерфейса плюс манипулирование DOM в целом?

Я хочу создать компонент пользовательского интерфейса, который призван предоставить пользователю простой способ выбора (предопределенных) ключевых слов (таких как «завтрак», «ужин» и т. д.) с помощью флажков. Имеется текстовое поле, в котором отображаются выбранные ключевые слова (разделенные запятыми) или которое позволяет пользователю вручную добавлять (новые) ключевые слова. Если пользователь снимает отметку с «ключевого слова», соответствующая запись будет удалена из текстового поля. Если пользователь выходит из текущего экрана и возвращается позже, необходимо проверить ранее выбранные ключевые слова.

Пока у меня есть шаблон:

<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, мои вопросы заключаются в том, имеет ли общий подход какой-то смысл? Как я могу правильно реализовать функцию «удалить ключевое слово из поля отображения при снятии отметки»? Как можно сохранить последнее состояние компонента до следующего создания всего представления?

Как на самом деле выполнять манипуляции с DOM и формировать передачу данных с помощью Meteor? Когда использовать jQuery или манипулирование DOM через объект Template? Мне трудно использовать $(event.target).is(':checked') в операторе if, в то время как через строку мне приходится использовать event.target.value для доступа к значению флажка, и я совершенно запутался в отношении манипуляций с DOM в Meteor.

Мы очень ценим ваши советы, помощь и лучшие практики. Привет, Банджип