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

Question

我想将 Facebook comments 添加到 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 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

来自煎茶的代码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: 
 */
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()
        });
    }
});

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

Facebook comments don't appear in extjs container

javascript

facebook

extjs

facebook-comments