Wrap JQuery plugin with View or Component?

1

Hi,

I would like to be able to display alert messages from any controller. I’ve found this really nice jquery-bootstrap plugin called bootstrap-growl (source). I tried to wrap jquery plugins in ember components but with no luck. I also read an old post about global messages being displayed via a view.

At this point I’m not sure if I should use a View or a Component. Components sounds better to me, since I’ve not dealt with Views…

I would like to be able to do something like Company.Grow(“Message”) from the controller. I should note that this jquery plugin can’t be called using regular syntax $(element) but it’s called just $.

Other examples that I’ve looked into: ember-cli-growl, bootstrap-for-ember.

Any help?

2

Although having never done it personally, I think this sounds like something you could do with dependency injection. Have you looked into that at all?

3

Having used a very similar plugin myself, I didn’t use either. If you don’t need to use a Handlebars template for the message, just call the method directly. Or if that feels wrong, factor it into a module like I did:

export function sendErrorNotification(message) {
    $.growl(message, { type: 'danger' });
}

export function sendSuccessNotification(message) {
    $.growl(message, { type: 'success' });
}

The notifications won’t affect your content in any way, so don’t worry about trying to ‘integrate’ with Ember. Just call the methods as you see fit.

4

@joseph_dillon_522 I don’t know much about dependency injection, I’ll have to look into it.

@gordon_kristan I really like the idea and I think sending notifications from the controller should be enough. Yes, I like the module you have. Given that I’m using ember-cli, where would be best for this code to be added?

Thank you.

5

Unfortunately, I don’t use Ember-CLI, I use my own module system. But from what I know about Ember-CLI, since these methods won’t be looked up by the container, they can go anywhere you want them to go. Ember-CLI creates a utils folder by default, so you could put it there, but I really don’t think it matters.

6

That’s a great idea. I’ve tried that but for some reason, all the animations are completely ignored and the notifications just appears and disappears.

7

That’s either a problem with the library that you’re using (maybe configuration issues) or a problem with some of your CSS conflicting with the library. There shouldn’t be any conflict between Ember and Bootstrap-Growl.

8

@xBlack try ember generate service growl. This will give you a /services/growl.js and an /initializer/growl.js.

In the initializer, you can specify you’d like your growl service injected in controllers.

In the service, you can actually create your object. Just export an Ember.Object with some methods like .growl(message).

9

@gordon_kristan I only have Bootstrap imported which I think it’s required anyway. It’s likely that I’m missing something else maybe.

@samselikoff I’m not sure if I’ll be able to get growl to work, but I would like to understand how service works. I got initializer:

export default {
	name: 'growl-service',
	initialize: function(container, app) {
		app.inject('controller', 'growlService', 'service:growl');
		app.inject('route', 'growlService', 'service:growl');
	}
};

Service:

import Ember from 'ember';

export default Ember.Object.extend({
	growl: function(message) {
		Ember.$.growl(message);
	}
});

Now, in my controller, how do I push a message (growl)?

1 Like
10

From controller, you have access to your service via this.get('growlService'). So you could

actions: {
  showError: function() {
    this.get('growlService').growl('Something went wrong!');
  }
}
11

Thanks. That works, although is a little verbose to access. I was hoping for something like Company.Growl() where Company could be my utility library…

I also figure what the animation issue was. I didn’t know animate was required. Now that I know and that it has 50kb+ minified, it seems too much so I’ll use something else for now.

Thank you.

12

This new post on Ember Zone is probably what you’re looking for.

EDIT: accidently hit “reply” to @samselikoff. I meant to reply to @xBlack

Ma bad

1 Like
13

Perfect article. Thank you.