select2和Meteor.js怎么办？

Question

我只使用 javascript / jquery 和 meteor 几个星期了，所以请原谅我问了一个简单的问题。

我正在尝试在我的 Meteor.js 应用程序中使用 Select2，但不知道如何让它工作。我已经在我的项目中安装了 natestrauser:select2，但显示的 jsfiddle 无法正常工作。 https://jsfiddle.net/jt0jr9uk

Template.createjob.onCreated( function() {
    $("clientlist").select2({
        placeholder: "Select a client",
        allowClear: false,
    });
});

和html：

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<select id="clientList" class="form-control">
    <option value=""></option>
    <option value="aberfitch">Abercrombie & Fitch</option>
    <option value="bent">Bentley</option>
    <option value="barb">Barbour</option>
    <option value="dcsh">DC Shoes</option>
    <option value="echo">ECHO United</option>
</select>

我也在使用 bootstrap。我已将其添加到我的项目中。基本上我只想要单个 select 框，如图所示 https://select2.github.io/examples.html#single

我应该使用任何进口产品吗？

Answer 1

所以首先，在 js 级别，您尝试 select 一个名为 clientlist

的 ID

Template.createjob.onCreated( function() {
    $("clientlist").select2({....

但是，在 html 级别，您的 ID 以驼峰式命名

<select id="clientList" class="form-control">

其次，当你 select 一个 id 时，你应该在 id 之前使用 # 符号，我的意思是你的 jquery 应该看起来像这样才能达到预期的效果结果：

   Template.createjob.onCreated( function() {
      $("#clientList").select2({
          placeholder: "Select a client",
          allowClear: false,
      });
    });

如果您使用 meteor >1.3 as

，则需要在文档顶部导入 jquery

import { $ } from 'meteor/jquery';

作为最后的建议，我将使用 Template.createjob.onRendered() 代替 Template.createjob.onCreated()

The template rendered callback is fired after the DOM is rendered on screen. The created callback is fired when the Template is instantiated but not yet rendered

检查以下 link 以获取完整说明

select2和Meteor.js怎么办？

Select2 and Meteor.js how to?

javascript

jquery

meteor

select2