Ember 应用程序未加载 Facebook Like Box

Question

我正在尝试让点赞框在我们的 ember 应用程序中工作，在一个名为 about 的模板中。问题是，如果我从另一条路线（而不是 about 路线）进入 ember 应用程序，然后使用 link-to 助手导航到 about 路线，然后是类似的框未呈现。相反，如果我 enter/refresh 直接 about 路线，它呈现得很好。即使有人从另一条路线导航到该路线，关于如何让它呈现的任何想法？

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

Answer 1

我看到的问题是您的脚本正在操纵 Ember 之外的 DOM。这将使 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'
                });
              };                    
        });
    }
});

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

Answer 2

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

但是 SDK 提供了一种方法来重新解析此类元素的文档，FB.XFBML.parse – 因此在将新元素添加到 DOM 后调用该方法。（您可以让它再次查看整个文档，或者传递对特定 DOM 元素的引用，这样它只会评估文档的“子树”，以获得更好的性能。）

Ember 应用程序未加载 Facebook Like Box

Facebook Like Box not loading on Ember app

javascript

facebook

facebook-javascript-sdk

ember.js