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

Dynamic data collection with Select2 and Meteor.js?

本文关键字：动态 数据采集 js Select2 Meteor 使用      更新时间：2023-09-26

我已经在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集合时，它都会反应性地重新呈现模板，这很好，这就是我希望它的行为方式。不需要的行为是，当它在所有客户端上重新渲染时，它会选择列表中的第一个选项！

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

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

<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>

也许有一种更聪明的方法可以做到这一点，但它对我有效

编辑：

更为复杂的是，我使用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
});

您是否尝试指定一个规则来保留<select>和<option>元素？

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

另请参阅文档。

另一个问题可能是<option>元素没有id。同样来自文件：

默认情况下，新的Meteor应用程序会自动包含保留输入包裹这保留了输入类型、文本区域、按钮、，select和具有唯一id属性或具有name的选项具有id的封闭元素中唯一的属性属性要关闭此默认行为，只需删除保留输入包。

相关文章：