6

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.

DougW
  • 28,776
  • 18
  • 79
  • 107
Rudi
  • 1,577
  • 3
  • 16
  • 42

1 Answers1

8

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

MilkyWayJoe
  • 9,082
  • 2
  • 38
  • 53
  • Thanks! good to know it should work, I'll further debug on this side why it's not comming up! – Rudi Mar 01 '13 at 10:45
  • I can see that toastr is called when I debug. I can even step into toastr and see that it's doing it's thing. When in toastr.js I set debug to true I get an object in the console that shows my settings, but I just can't see it popping up. No matter from with template/controller it's being invoked.... – Rudi Mar 02 '13 at 07:54
  • Inside of toastr.js set the timeout: 0 for the defaults and then when you have a toastr that should show up, search your dom in the developer console, and see if the toastr div is there. – WallMobile Apr 17 '13 at 00:11