流星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甚至可以選擇在數據更改時自動更新數據 。