Meteor 1.0 一般如何实现这种 UI 行为加上 DOM 操作？答案

【问题标题】：Meteor 1.0 How to realize this UI behaviour plus DOM manipulation in general?Meteor 1.0 一般如何实现这种 UI 行为加上 DOM 操作？
【发布时间】：2015-02-19 19:55:49
【问题描述】：

我想制作一个 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 来访问复选框值，我对 Meteor 中的 DOM 操作感到很困惑。

非常感谢您的提示、帮助和最佳实践。干杯，本吉普

【问题讨论】：

标签： javascript jquery dom meteor meteor-helper

【解决方案1】：

考虑Autoform 包。您可以使用 allowed values 定义 SimpleSchema 字段，并告诉 Autoform 将该字段呈现为 select option group。如果我没记错的话，Autoform 甚至可以选择在更改时自动 update the data。

【讨论】：