Select2和Meteor.js怎么做？

Question

I've only been using javascript / jquery and meteor for a couple of weeks now, so forgive me for asking what will be a simple question.

I'm trying to use Select2 in my Meteor.js app, and can't figure out how to get it working. I have installed natestrauser:select2 in my project and my jsfiddle shown just won't work. https://jsfiddle.net/jt0jr9uk

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

And 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>

I'm using bootstrap also. Which I've added to my project. And basically I just want the single select box as shown here https://select2.github.io/examples.html#single

Should I be using any imports, or anything?

Answer 1

So first of all, on js level you tried to select an id, named clientlist

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

However, on html level, your id is defined in camelCase

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

Second of all, when you select an id, you should use # sign before the id, what I mean is your jquery should look like this to achive the desired result:

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

You need to import jquery on top of the document if you use meteor >1.3 as

import { $ } from 'meteor/jquery';

As a final suggestion, I would use Template.createjob.onRendered() instead for 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

Check the following link for the full explanation https://stackoverflow.com/a/28783762/7235661