jQuery Plugin into Ember component

Question

I am trying to turn this jQuery plugin https://github.com/xoxco/jQuery-Tags-Input into an Ember component.

import Ember from 'ember';

export default Ember.Component.extend({

tagName : "input",
type : "text",
attributeBindings : [ "name", "type", "value", "id"],

_initialize: function() {

    Ember.assert("Tags Input has to exist on Ember.$.fn.tagsInput", typeof Ember.$.fn.tagsInput === "function");

    this.$('#tags').tagsInput({'width':'100px'});

}.on('didInsertElement')
});

Then in my handlebar file {{tag-input id="tags"}}

But it seems that the jQuery isn't working as it is just a standard input box. This is the generated HTML <input id="tags" class="ember-view" type="text"></input>

But if I copy this.$('#tags').tagsInput({'width':'100px'}); into the console and run it the element uses the plugin.

What would be the reason that the plugin wouldn't get fired on didInsertElement?

Community · Accepted Answer · 2017-05-23 11:51:37Z

3

In addition to what kunerd said, you might need to schedule this to after everything is fully rendered by scheduling your code to the afterRender queue in the run loop, like this:

_initialize: function({
  Ember.run.scheduleOnce('afterRender', this, function() {
    this.$().tagsInput({'width': '100px'});
  });
}).on('didInsertElement')

Ember.run is a slightly complicated topic, but essentially things happen in order in "queues" that Ember fires off, and the afterRender queue is the one that happens after everything is rendered.

Here's a pretty good blogpost on Ember.run, and here's an even more in-depth book-like repository on it.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Apr 30, 2015 at 13:51

Kim Røen

4686 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kunerd · Accepted Answer · 2015-04-30 12:46:46Z

1

Your problem is that this.$("#tags") searches for a DOM element with id: tags inside your components DOM element.

To solve your problem, you should use this.$().tagsInput({..}) instead.

Also see this JSBin for a working example.

answered Apr 30, 2015 at 12:46

kunerd

1,07610 silver badges25 bronze badges

Comments

svlzx · Accepted Answer · 2016-08-22 11:10:49Z

0

Add setup jquery code into your component.js like following:

import Ember from 'ember';

export default Ember.Component.extend({

tagName : "input",
type : "text",
attributeBindings : [ "name", "type", "value", "id"],

setupTagsInputPlugin: Ember.on('didRender', function() {
    this.$("#tags").tagsInput({
width:"100px"
    });
  }),

});

answered Aug 22, 2016 at 11:10

svlzx

1923 silver badges11 bronze badges

Collectives™ on Stack Overflow

jQuery Plugin into Ember component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related