Facebook Like Box 未在 Ember 应用上加载

Question

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

模板/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

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

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

Answer 2

我看到的问题是您的脚本在 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'
                });
              };                    
        });
    }
});

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