使用 ember.js 进行社交分享答案

【问题标题】：Social sharing with ember.js使用 ember.js 进行社交分享
【发布时间】：2013-10-03 12:01:30
【问题描述】：

我有使用 ember.js 制作的单页应用程序，但在实施社交分享时遇到了一些问题。

我需要在 hbs 模板中实现如下：

<a href="http://someaddres.com?u={{model.url}}&title={{model.title}}">Link</a>

但是，当它被呈现到浏览器中时，href 字符串中连接了额外的脚本标签，最终链接有效，我被重定向，但标题却是这样的：

<script id='metamorph-190-start' type='text/x-placeholder'></script>
MyTitle
<script id='metamorph-19...

我只需要 MyTitle。

更具体地说，我使用以下 hbs 模板进行 facebook 分享，模型被初始化到路由器中：

<a href="https://www.facebook.com/login.php?next=http%3A%2F%2Fwww.facebook.com%2Fsharer%2Fsharer.php%3Fs%3D100%26p%255Btitle%255D%3D{{model.title}}%26p%255Burl%255D%3D{{model.url}}%26p%255Bsummary%255D%3D{{model.summary}}%26p%255Bimages%255D%255B0%255D%3D%2540Model.EventImage%2527%253EShare&display=popup"
target="_blank">
<img src="http://www.simplesharebuttons.com/images/somacro/facebook_img.png" alt="Facebook" />
</a>

我也尝试了第三方库，例如 janrain、ShareThis 或 AddThis，但我遇到了初始化问题，放入模板时根本不显示按钮，并且还遇到了从模型自定义消息的问题。

谢谢，伊戈尔

【问题讨论】：

标签： javascript facebook facebook-graph-api ember.js social

【解决方案1】：

方法 1 - 使用未绑定

要摆脱模型值周围的变形标签，请尝试使用 unbound 选项，它正是这样做的：

<a href="http://someaddres.com?u={{unbound model.url}}&title={{unbound model.title}}">Link</a>

方法 2 - 计算 URL

如果您需要在模型更改时绑定和重新评估模型属性，那么另一种方法可能会更好，例如在备份模板的控制器中生成 URL。

假设您的控制器是例如ApplicationController 和链接位于对应的application 模板中，那么您可以执行以下操作：

App.ApplicationController = Ember.ObjectController.extend({
  url: function() {
    var url = this.get('model.url');
    var title = this.get('model.title');
    // grab here as many properties you need from your model
    var href = 'http://someaddres.com?u=%@&title=%@'.fmt(url, title);
    return href;
  }.property('model')
});

然后在你的模板中使用计算得到的url 属性：

<a {{bind-attr href=url}} target="_blank">Link</a>

希望对你有帮助。

【讨论】：

【解决方案2】：

这实际上效果不佳，因为这将打开一个新的浏览器选项卡\窗口，而不是使用建议的 js 代码表单 facebook@https://developers.facebook.com/docs/plugins/share-button/ 时获得的所需弹出窗口

不幸的是，您还需要在调用 window.open(url,"blah","width=300,height=500") 的 Ember.View（例如）中创建一个“操作”

【讨论】：