与余烬的社交分享.js
Social sharing with ember.js
我有用余烬制作的单页应用程序.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...
我只需要我的标题。
更具体地说,我使用以下 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,但对于它们,我遇到了初始化问题,按钮在放入模板时根本不显示,并且从模型自定义消息时也存在问题。
谢谢伊戈尔
方法 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>
希望对您有所帮助。
这实际上效果不佳,因为这将打开一个新的浏览器选项卡''窗口,而不是您在使用建议的 js 代码表单 facebook @ https://developers.facebook.com/docs/plugins/share-button/时获得的所需弹出窗口
不幸的是,您还需要在Ember.View(例如)中创建一个调用window.open(url,"blah","width=300,height=500")的"动作"
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- Node.js v6.2.0类扩展不是函数错误
- 当js函数's已执行
- 要求未定义JS回调参数
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 如何使用d3.js从csv文件中绘制areaplot?请任何人分享代码
- 与余烬的社交分享.js
- Facebook js api:将帖子分享到朋友的留言板
- 如何跟踪Facebook分享按钮在谷歌分析(Analytics .js)
- Js:自定义字段名'通过'在addthis twitter分享JS插件
- 如何模仿Facebook's链接分享"使用node.js和javascript的功能
- 使用Reqwest.js获取twitter和facebook的分享