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

Question

我要添加Facebook comments到 extjs 容器。我创建了一个 View ，它是一个内部有 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

在写了一些 fiddle 来模拟你的问题后，我注意到我也遇到了同样的问题。经过一番检查和尝试后，我注意到我的控制台中出现了由 facebook sdk js 引起的错误。

Error: invalid version specified

经过一番研究，我发现 a solution on SO :

I made a simple tweak and changed the path:

From:   //connect.facebook.net/en_GB/sdk.js  
To:     //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()
        });
    }
});