toastr and ember.js

Question

Is the popup library toastr not going to work with Ember because of direct dom manipulation that ember doesn't like? Are there any other libraries like this one that work nicely with ember?

Edit

Even through the working example posted below I could not get this to work locally. I finally used Pine Notify which worked straight away.

Answer 1

This works fine in Ember, you just have to handle the event in the right place. The "right place" depends on your implementation. If you want this to be fired from a button within your view, you'll need to use the {{action}} helper passing the action name. Example:

<script type="text/x-handlebars" >
    <button class="btn btn-info" {{action showInfo}}>Info</button>
</script>

In the template above, I'm saying that the button should fire the showInfo event, so the Controller responsible for this view should have a function with the same name:

App.ApplicationController = Em.ArrayController.extend({
    showInfo: function() {
        toastr.info('This is some sample information');
    }
});

You can also have the view handle the event; the code below defines a click event, so if you click anywhere in the view, it would run your function:

App.OtherView = Em.View.extend({
    click: function(e) {
        toastr.error('This is some sample error');
    }
});

and in your Handlebars template, you don't have do tell the action since you are already saying in the view class that you want to handle the click event for that view, so you can simple render the view and style it:

{{#view App.OtherView class="btn btn-danger"}}
    Error
{{/view}}

Here's a sample in JSFiddle: http://jsfiddle.net/schawaska/YZwDh/

I recommend that you read the Ember Guide about the {{action}} helper