我正试图将AddThis小部件添加到ember.js应用程序中。我使用的是直接从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 -->
并从中获取此错误:"Uncaught TypeError:无法读取未定义的属性'call'"http://ct1.addthis.com/static/r07/core085.js在2号线上。
我曾请求支持,但一直没有成功。任何关于造成这种情况的原因的想法都会很有帮助!提前感谢!
编辑:我目前在应用程序的模板中有上面的代码。
我对addthis小部件和IMHO有了更深入的了解,从脚本加载的代码做了一些令人讨厌的事情,比如创建script
标记或iframe
等。在handlebars
模板中,小部件脚本所做的DOM操作不会与ember.js
协同工作,除非addthis背后的团队做了一些事情使小部件更易于集成。
所以我看了一些替代的共享小部件,sharethis与addthis基本相同,但有一个很大的区别——我很容易使用ember.js
基本上,我所做的是为小部件创建一个视图,在didInsertElement
中,小部件初始化被称为:
App.WidgetView = Ember.View.extend({
templateName: 'widget',
didInsertElement: function() {
stLight.options({publisher: "ur-733dae74-7b06-4fef-3f54-f60dce5ce03e", doNotHash: false, doNotCopy: false, hashAddressBar: false});
}
});
然后在另一个模板中,小部件可以很容易地使用,只需执行以下操作:
{{view App.WidgetView}}
widget
模板如下所示:
<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>
看看这里的工作演示。
免责声明:虽然我的答案并不能直接解决您的问题,但也许它可以帮助您通过使用不同的共享小部件来采取不同的方法,因为我想您不会因为某些晦涩的编程小部件无法正常工作而放弃ember.js
。
希望能有所帮助。