javascript - 如何将 select2 与 Meteor 一起使用？

Question

有人可以向我解释 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。

Answer 1

Uncaught TypeError: $(...).select2 is not a function

上述错误的发生是因为您没有包含 Select2 的 JavaScript，如评论中所指出的那样。大气package you linked to只是为了在现有的 Select2 包之上提供 Bootstrap 风格的样式。

您还应该包括 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?