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变量中，我用于保存Select2控件值的更具参与性的特定于Meteor的技术。像这样：

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
});

Answer 2

您是否尝试过指定规则以保留<select>和<option>元素？

  Template.mySubjectsSelector.preserve({
      'select[id]': function (node) { return node.id; },
      'option': function (node) { return node.id; }
    });

另见documentation。

另一个问题可能是<option>元素没有id。另外还有文档：

默认情况下，新的Meteor应用程序会自动包含保留输入包。这保留了输入，textarea，按钮等所有类型的元素， select，以及具有唯一ID属性或具有名称的选项具有id的封闭元素中唯一的属性属性。要关闭此默认行为，只需删除保留输入包。

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

2 个答案: