如何在流星上使用select2？

Question

有人可以向我解释一下select2如何与Meteor配合使用？我正在使用zimme:select2-boostrap3-css,我对如何使用它一无所知.

我检查了原来的select2 github页面和包中的那个.第一个解释了如何在没有Meteor的情况下使用它.

我只是将jQuery代码添加到我的一个*.js文件中以使其工作吗？

在HTML中:

<select class="input" id="clientName" name="clientName">
    {{#each getClients}}
        <option value="{{clientName}}" data-id={{_id}}>{{clientName}}</option>
    {{/each}}
</select>

在JS中:

$("#clientName").select2();

因为这不起作用.

加载我的页面时,我收到此错误Uncaught TypeError: $(...).select2 is not a function.

Answer 1

未捕获的类型错误：$(...).select2 不是函数

发生上述错误是因为您没有包含 Select2 的 JavaScript，如注释中所述。您链接到的气氛包只是为了在现有的 Select2 包之上提供 Bootstrap 式的样式。

您还应该包括meteor add natestrauser:select2

您可能遇到的下一个问题是，当 JavaScript 运行时，<select class="input" >可能不会加载到 DOM 中，因此$("#clientName")找不到任何内容。要等待初始化 Select2 直到页面加载，您应该将代码包装在 jQuery 的 DOM 就绪函数中$(function(){});，并将其包装在Meteor.Startup()for good 措施中，如下所示：

Meteor.startup(function () {
  $(function(){
    $("#clientName").select2();
  });
});

Meteorpad 中的工作演示

延伸阅读：

• 当 Meteor 中的文档准备就绪时，如何运行 JQuery 代码？