Facebook评论不会出现在extjs容器中

Question

我想将Facebook评论添加到一个extjs容器中。我创建了一个视图，它是一个容器，里面有一个div：

Ext.define('recovery.view.FacebookComment', {

    extend: 'Ext.container.Container',
    xtype: 'facebook-comments',

    requires: [
        'Ext.container.Container'
    ],

    items: [{
        xtype: 'container',
        width: '100%',
        height: 300,
        style: {
            borderColor  : 'green',
            borderStyle  : 'dotted'
        },
        autoScroll: true,
        listeners: {
            beforerender: function (container) {
                // Facebook SDK

                var html = '<div class="fb-comments" data-href="https://recovery.twindb.com" data-width="600" data-numposts="5"></div>';

                (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) {
                        console.log('SDK is already created:');
                        console.log(d.getElementById(id));
                        return;
                    }
                    js = d.createElement(s); js.id = id;
                    js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
                    fjs.parentNode.insertBefore(js, fjs);
                    // container.update(html);
                }(document, 'script', 'facebook-jssdk'));
                Ext.Function.defer(function () {
                    container.update(html);
                }, 1000);
            },
        }
    }]

});

我看到SDK已经加载：

​

还创建了一个<script>标记：

​

​

还创建了一个<div>：

​

​

但这些评论并没有出现：

​

​

这个问题是暂时的，有时评论确实会出现，这取决于什么时候加载SDK。

这里有什么问题吗？有什么解决办法吗？

Answer 1

在写了一些模拟你的问题的花招之后，我注意到我也有同样的问题。经过一些检查和尝试，我注意到我的控制台中有一个错误是由facebook js引起的。

Error: invalid version specified

经过一些研究，我发现了关于SO的一个解决方案

我做了一个简单的调整，并改变了路线： 从//connect.facebook.net/en_GB/sdk.js到: //connect.facebook.net/en_GB/all.js

在这里，您可以找到一个正在工作的Sencha Fiddle：

https://fiddle.sencha.com/#fiddle/11p2

https://fiddle.sencha.com/fiddle/11p2/preview

来自Sencha Fiddle的代码：

/*
 * I wrote this example using the Ext.Loader object
 */
Ext.Loader.setConfig({
    enabled: true,
    disableCaching: true
});

/*
 * NOTE: I changed sdk.js to all.js to make it work
 * 
 * I was getting an error from facebook sdk: Error: invalid version specified
 * See: https://stackoverflow.com/a/28578154/408487
 */
Ext.Loader.loadScript('//connect.facebook.net/en_GB/all.js#xfbml=1&version=v2.5');

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.Container', {
            xtype: 'container',
            height: 300,
            style: {
                borderColor  : 'green',
                borderStyle  : 'dotted'
            },

            /* I hate it that I can't use autoEl, but have to add another div through the html property */
            /*autoEl: {
                tag: 'div',
                'data-href': 'https://recovery.twindb.com',
                'data-width': '600',
                'data-numposts': '5'
            },
            componentCls: 'fb-comments',*/
            html: '<div class="fb-comments" data-href="https://recovery.twindb.com" data-width="600" data-numposts="5"></div>',

            autoScroll: true,
            renderTo: Ext.getBody()
        });
    }
});