0

我想制作一个 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 操作感到非常困惑。

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

4

1 回答 1

0

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

于 2015-01-26T13:21:15.297 回答