Question

我正在尝试在我们的ember应用程序中使用名为about的模板中的类似框。问题是如果我从另一条路线（而不是about路线）进入余烬应用程序，然后使用about助手导航到link-to路线，则不会渲染相似的框。相反，如果我直接输入/刷新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>
...

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

您还可以将此功能提取到组件中，因为它似乎是一个完美的候选者。

Facebook Like Box未在Ember app上加载

2 个答案: