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：

我做了一个简单的调整并改变了路径：
From:   //connect.facebook.net/en_GB/sdk.js  
To:     //connect.facebook.net/en_GB/all.js

在这里你可以找到一个工作的Sencha小提琴：
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()
        });
    }
});

Facebook评论不会出现在extjs容器

1 个答案: