代码之家 › 专栏 › 技术社区 › Bogdan Zurac

Facebook Like Box未加载到Ember应用程序

facebook-javascript-sdk ember.js facebook javascript

Bogdan Zurac · 技术社区 · 11 年前

我正在尝试在我们的ember应用程序中使用一个名为 about 。问题是,如果我从另一条路线(而不是 关于 路线),然后导航到 关于 带有的路线 link-to helpers,则不会渲染类似的框。相反,如果我输入/刷新 关于 直接路由,渲染效果很好。如果有人从另一条路线导航到该路线,如何使其呈现?

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')
});

2 回复 | 直到 11 年前

C3roe 11 年前

默认情况下,FacebookJSSDK在初始化文档时会遍历文档一次,并查找要解析并转换为FB社交插件的元素。但如果你只是在以后加载和添加这些元素,那当然是行不通的。

但是SDk提供了一种重新解析文档以查找这些元素的方法, FB.XFBML.parse 所以在将新元素添加到DOM之后调用它。(您可以让它再次查看整个文档,或者传递对特定DOM元素的引用,这样它只会评估文档的子树,以获得更好的性能。)

Oren Hizkiya 11 年前

我看到的问题是你的脚本正在操纵 DOM Ember外面。这将使ember无法跟踪DOM的状态并对其进行操作。

您的逻辑假设脚本标记将是第一个,这一点您无法保证,因为Ember正在创建和删除脚本标记。

您可以直接包含脚本标记,而不是通过代码创建元素。

把这个放进去 app/index.html :

<script src="//connect.facebook.net/en_US/sdk.js"></script>

从application.js中删除逻辑,并在 views/about.js :

export default Ember.View.extend({

    facebook_app_id: config.APP.facebook_app_id,

    didInsertElement : function(){
        this._super();
        Ember.run.scheduleOnce('afterRender', this, function(){
              // initialize Facebook SDK
              var facebook_id = this.facebook_app_id;
              window.fbAsyncInit = function ()
              {
                FB.init({
                  appId:   facebook_id,
                  xfbml:   true,
                  version: 'v2.1'
                });
              };                    
        });
    }
});

您还可以将此功能提取到组件中,因为它看起来是一个完美的候选。