javascript - 使用 Select2 和 Meteor.js 进行动态数据收集？

Question

我已经在 Select2 多选中设置了一个集合作为我的数据源:

<template name="mySubjectsSelector">
    <div>
        <select id="mySubjects" data-placeholder="Choose your subjects" multiple>
            {{#each subjects}}
                <option>{{this.name}}</option>
            {{/each}}
        </select>
    </div>
</template>

还有.js:

Template.mySubjectsSelector.subjects = function () {
    console.log("Fetching subjects...");
    return Subjects.find({}).fetch();
};

Template.mySubjectsSelector.rendered = function () {
    console.log("mySubjectsSelector is rendered!");
    $('#mySubjects')
        .select2({
            width: "300px"
        });
};

每当 Subjects 集合更新时，它都会重新呈现模板，这很好，这就是我希望它的行为方式。不需要的行为是，它会在所有客户端上重新呈现时选择列表中的第一个选项!

如何避免在重新加载/重新渲染时选择第一个项目？

Answer 1

我所做的是创建一个空白的第一个选项。

<template name="mySubjectsSelector">
  <div>
    <select id="mySubjects" data-placeholder="Choose your subjects" multiple>
      <option></option>
      {{#each subjects}}
        <option>{{this.name}}</option>
      {{/each}}
    </select>
  </div>
</template>

可能有更聪明的方法来做这件事，但它对我有用。

编辑:

通过将值存储在 Session 变量中，我使用了更复杂的 Meteor 特定技术来保存 Select2 控件的值。像这样:

Template.template.rendered = function () {

// assumes 1) all Select2 controls are originally <select> tags
//     and 2) all Select tags have ids assigned

  $('select').each(function (i) { 
    if (Session.get('preserve-' + this.id)) {
      $(this).val(Session.get('preserve-' + this.id));
    }
  });

  $('.select2').select2({ /* select2 code here */ })
  .on('change', function (e) {
    if (e.val !== "") {
      Session.set("preserve-" + e.target.id, e.val")
    }
  });

};

但是:我可能没有完全理解这个问题。如果您只是询问如何使用 Select2 允许未选择的答案，请尝试使用 placeholder 和 allowclear。来自文档:

$("#e2").select2({
  placeholder: "Select a State",
  allowClear: true
});