Ember.js + AddThis error "Uncaught TypeError: Cannot read property 'call' of undefined "

Question

I am attempting to add the AddThis widget to an ember.js app. I am using basic code taken directly from addthis.com:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_pinterest_share"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-51ddaec37ede7c28"></script>
<!-- AddThis Button END -->

...and getting this error: "Uncaught TypeError: Cannot read property 'call' of undefined" from http://ct1.addthis.com/static/r07/core085.js on line 2.

I have asked support but have had no luck yet. Any ideas as to what is causing this would be helpful! Thanks in advance!

Edit: I currently have the code above in a template in the app.

Answer 1

I had a deeper look at the addthis widget and IMHO the code loaded from the script does some nasty things like creating a script tag nor an iframe etc. and being inside a handlebars template the DOM manipulations that the widget script does won't work in tandem with ember.js, unless the team behind addthis does something to make there widget more integration friendly.

So I had a look at some alternative sharing widgets, and sharethis does basically the same as addthis but with one big difference - I got easily working with ember.js

Basically what I've done was to create a view for the widget, and inside the didInsertElement the widget initialization is called:

App.WidgetView = Ember.View.extend({
  templateName: 'widget',
  didInsertElement: function() {
    stLight.options({publisher: "ur-733dae74-7b06-4fef-3f54-f60dce5ce03e", doNotHash: false, doNotCopy: false, hashAddressBar: false});
  }
});

Then in another template the widget can be easily used by simply doing:

{{view App.WidgetView}}

The widget template looks like this:

<script type="text/x-handlebars" data-template-name="widget">
  <span class='st_sharethis_large' displayText='ShareThis'></span>
  <span class='st_facebook_large' displayText='Facebook'></span>
  <span class='st_twitter_large' displayText='Tweet'></span>
  <span class='st_linkedin_large' displayText='LinkedIn'></span>
  <span class='st_pinterest_large' displayText='Pinterest'></span>
  <span class='st_email_large' displayText='Email'></span> 
</script>

Have a look here for a working demo.

Disclaimer: Although my answer does not fix directly your problem, but maybe it helps you take a different approach by using a different sharing widget, because I guess you won't abandon ember.js only because some obscure programmed widget does not work correctly.

Hope it helps.