Facebook Like Box 未加载到 Ember 应用程序上 [英] Facebook Like Box not loading on Ember app

问题描述

我正在尝试在我们的 ember 应用程序中使用名为 about 的模板中的类似框.问题是，如果我从另一条路线(而不是 about 路线)进入 ember 应用程序，然后使用 link-to 导航到 about 路线> helpers，则不呈现 like 框.相反，如果我直接输入/刷新 about 路由，它呈现得很好.即使有人从另一条路线导航到该路线，有关如何使其呈现的任何想法?

模板/about.hbs:

<代码>...<div class = "fb-like-box" data-href = "https://www.facebook.com/app-link" data-width = "250"数据高度=313"数据颜色方案=光"数据显示面=真"数据头=假"data-stream = "false" data-show-border = "true">

...

views/application.js:

导出默认 Ember.View.extend({facebook_app_id: config.APP.facebook_app_id,initLibs: 函数 (){//初始化 Facebook SDKvar facebook_id = this.facebook_app_id;window.fbAsyncInit = 函数 (){FB.init({appId: facebook_id,xfbml: 真的，版本:'v2.1'});};(函数(d，s，id){var js, fjs = d.getElementsByTagName(s)[0];如果 (d.getElementById(id)){返回;}js = d.createElement(s);js.id = id;js.src = "//connect.facebook.net/en_US/sdk.js";fjs.parentNode.insertBefore(js, fjs);}(文档, '脚本', 'facebook-jssdk'));}.on('didInsertElement')});

解决方案

默认情况下，Facebook JS SDK 在您的文档初始化时遍历"一次，并查找要解析的元素并将其转换为 FB 社交插件.但是如果你只是在稍后加载和添加这些元素，那当然是行不通的.

但是 SDk 提供了一种为此类元素重新解析文档的方法，FB.XFBML.parse —— 所以在你的新元素被添加到 DOM 之后调用它.(您可以让它再次查看整个文档，也可以传入对特定 DOM 元素的引用，以便它仅评估文档的子树"，以获得更好的性能.)

I'm trying to get the like box to work inside our ember app, in a template called about. The problem is that if I enter the ember app from another route (instead of about route), then navigate to the about route with link-to helpers, then the like box is not rendered. Instead, if I enter/refresh the about route directly, it renders just fine. Any ideas on how to make it render even if somebody navigates to that route from another route ?

templates/about.hbs:

...
<div class = "fb-like-box" data-href = "https://www.facebook.com/app-link" data-width = "250"
                 data-height = "313" data-colorscheme = "light" data-show-faces = "true" data-header = "false"
                 data-stream = "false" data-show-border = "true"></div>
...

views/application.js:

export default Ember.View.extend({

  facebook_app_id: config.APP.facebook_app_id,

  initLibs: function ()
            {
              // initialize Facebook SDK
              var facebook_id = this.facebook_app_id;
              window.fbAsyncInit = function ()
              {
                FB.init({
                  appId:   facebook_id,
                  xfbml:   true,
                  version: 'v2.1'
                });
              };
              (function (d, s, id)
              {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id))
                {
                  return;
                }
                js = d.createElement(s);
                js.id = id;
                js.src = "//connect.facebook.net/en_US/sdk.js";
                fjs.parentNode.insertBefore(js, fjs);
              }(document, 'script', 'facebook-jssdk'));
            }.on('didInsertElement')
});

解决方案

By default the Facebook JS SDK "goes through" your document once when it is initialized, and looks for elements to parse and convert into FB social plugins. But if you only load and add those elements later, that of course doesn’t work.

But the SDk offers a method to re-parse the document for such elements, FB.XFBML.parse – so call that after your new elements are added to the DOM. (You can either let it look through the whole document again, or pass in a reference to a specific DOM element, so that it will only evaluate a "sub-tree" of the document, for better performance.)

这篇关于Facebook Like Box 未加载到 Ember 应用程序上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！