流星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操作？ 我有点很难在if语句中使用$(event.target).is(':checked') ，而稍后在一行中，我必须使用event.target.value来访问复选框值，我很困惑关于流星中的DOM操作。

非常感谢您的提示，帮助和最佳做法。 干杯，Bunjip

Answer 1

考虑自动套准程序包。 您可以使用允许的值定义SimpleSchema字段，并告诉Autoform将字段呈现为选择选项组 。 如果我没记错的话，Autoform甚至可以选择在数据更改时自动更新数据 。