如何将 select2 与 Meteor 一起使用？

Posted 2023-05-07

【中文标题】如何将 select2 与 Meteor 一起使用？

【英文标题】：How to use select2 with Meteor?

【发布时间】：2016-01-30 01:27:36

【问题描述】：

有人可以向我解释 select2 如何与 Meteor 一起工作吗？我正在使用zimme:select2-boostrap3-css，但我不知道如何使用它。

我检查了原始select2 github page 和package 中的那个。第一个解释了如何在没有 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。

【问题讨论】：

看起来流星版本只是复制 CSS - 可能在某处添加 javascript，如 client/select2.js

同意，这个包只有css。您需要实际的 select2 包之一来获取 js。

您需要包含 Select2 JavaScript 代码。

如果一切就绪，我的方法会好吗？

【参考方案1】：

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

发生上述错误是因为您没有包含 Select2 的 JavaScript，如 cmets 中所标识的。气氛package you linked to 只是为了在现有的 Select2 包之上提供引导式样式。

您还应该包括meteor add natestrauser:select2

您可能遇到的下一个问题是，当 JavaScript 运行时，<select class="input" > 可能不会加载到 DOM 中，因此$("#clientName") 将找不到任何东西。要等待初始化 Select2 直到页面加载，您应该将代码包装在 jQuery 的 DOM 就绪函数 $(function()); 中，并将其包装在 Meteor.Startup() 中，这样可以很好地衡量：

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

Working Demo in Meteorpad

进一步阅读：

How to run JQuery code when document is ready in Meteor?

【讨论】：

非常感谢。它仍然没有立即起作用，但您的进一步阅读链接为我提供了我需要的信息！我不得不使用 Template.onRendered 来做 jQuery 魔术。今天我学到了一些新东西。