如何在流星上使用select2？ [英] How to use select2 with Meteor?

问题描述

有人可以向我解释一下select2如何与Meteor配合使用？我正在使用 zimme：select2-boostrap3-css ，我不知道如何使用它。

can someone explain to me how select2 works with Meteor? I am using zimme:select2-boostrap3-css and I have no clue on how to use it.

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

I checked both the original select2 github page and the one from the package. The first one explains how to use it without Meteor.

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

Do I just add the jQuery code to one of my *.js-files in order to get it to work?

在HTML中：

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

在JS中：

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

因为这不起作用。

加载我的页面时出现此错误未捕获TypeError：$（...）。select2不是函数。

When loading my page I get this error Uncaught TypeError: $(...).select2 is not a function.

推荐答案

未捕获TypeError：$（...）。select2不是函数

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

上面发生的错误是因为你没有包含Select2的JavaScript，正如评论中所指出的那样。 您链接到的包的氛围仅用于提供Bootstrap式样式 现有的Select2包。

The error above happening because you haven't included the JavaScript for Select2, as identified in the comments. The atmosphere package you linked to is just for providing Bootstrap-esque styling on top of the existing Select2 package.

你还应该包括 meteor add natestrauser：select2

You should also include meteor add natestrauser:select2

您可能遇到的下一个问题是JavaScript运行，< select class =input> 可能无法加载到DOM中，因此 $（＃clientName）找不到任何东西。要等到初始化Select2直到页面加载，你应该将代码包装在jQuery的DOM ready函数 $（function（）{}）; 中并将其包装在 Meteor.Startup（）这样的好措施：

The next problem you may run into is that when the JavaScript runs, <select class="input" > might not be loaded into the DOM so $("#clientName") won't find anything. To wait to initialize Select2 until the page is loaded, you should wrap the code in the jQuery's DOM ready function $(function(){}); and wrap that in the Meteor.Startup() for good measure like this:

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

Meteorpad的工作演示

进一步阅读：

• 如何在Meteor中准备好文档时运行JQuery代码？

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

这篇关于如何在流星上使用select2？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！