当导入次数和文件大小很大时，无法使聚合物准备就绪

我可以在jsbin中运行以下所有简化代码而不会出现任何错误。实际代码的大小很大 - 它包含许多导入，以及 Polymer(( 中的属性和函数。

以下简化版本的index.html的真实版本在本地主机中与Iceweasel和Chromium一起工作得很好：(版本1(

<!DOCTYPE html>
<html>
<head>
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="http://polygit.org/components/polymer/polymer.html">
    <link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
</head>
<body>
    <dom-module id="my-element">
        <template>
            <paper-input></paper-input>
        </template>
    </dom-module>
    <script>
        HTMLImports.whenReady(function(){
            Polymer({
                is: 'my-element'
            });
        });
    </script>
    <my-element></my-element>
</body>
</html>

但是，当从远程主机提供上述index.html的真实版本时，传递给HTMLImports.whenReady的函数永远不会被调用。此外，冰鹦还抱怨ReferenceError: Polymer is not defined。

然后我借用这种技术来获得这个版本(版本 2(：

<!DOCTYPE html>
<html>
<head>
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="http://polygit.org/components/polymer/polymer.html">
    <link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
</head>
<body>
    <dom-module id="my-element">
        <template>
            <paper-input></paper-input>
        </template>
    </dom-module>
    <script>
        var init=function(){
            Polymer({
                is: 'my-element'
            });
        };
        if(HTMLImports.ready)
            init();
        else{
            console.log("called"); //Always comes here!
            HTMLImports.whenReady(init);
        }
    </script>
    <my-element></my-element>
</body>
</html>

上述版本的注释：真正的大版本总是运行到HTMLImports.whenReady(init);但函数init()永远不会被调用。

我也尝试了这种技术，使简化的代码看起来像这样(版本 3(：

<!DOCTYPE html>
<html>
<head>
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="http://polygit.org/components/polymer/polymer.html">
    <link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
</head>
<body>
    <dom-module id="my-element">
        <template>
            <paper-input></paper-input>
        </template>
    </dom-module>
    <script>
        document.addEventListener('WebComponentsReady',function(){
            console.log("called"); //Never gets called!
            Polymer({
                is: 'my-element'
            });
        });
    </script>
    <my-element></my-element>
</body>
</html>

上述版本中的console.log()永远不会执行。

如何更改代码，以保证即使在文件大小很大且网络和服务器速度较慢的情况下，每个元素也能正确加载？

提前谢谢你！

(编辑1(我的浏览器今天的响应与昨晚不同：

版本1：Iceweasel(即Firefox？(和Chromium(即Chrome？(都保持沉默，并在开发人员控制台中产生空白页，没有任何错误或警告。
版本 2、版本 3 和 @akc42 的版本：Chromium 显示预期的正确页面。冰鼬抱怨ReferenceError: Polymer is not defined .

(编辑2(我的测试结果与 20 分钟前不同，如下所示：

版本2：铬给出空白页。冰鼬抱怨ReferenceError: Polymer is not defined .
版本3：铬抱怨Uncaught ReferenceError: Polymer is not defined .Iceweasel抱怨"参考错误：聚合物没有定义"。

我正在阅读这里的note。我将index.html一分为二，看看它是否会产生任何不同的结果。

(编辑3(我很遗憾地报告，将index.html拆分为两个文件没有任何区别 - 铬和冰鼬都悄悄地给出了空白页。

(版本4(：

index.html ：

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="my-element.html">
</head>
<body>
    <my-element></my-element>
</body>
</html>

my-element.html(版本 4a(：

    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="http://polygit.org/components/polymer/polymer.html">
    <link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
    <dom-module id="my-element">
        <template>
            <paper-input></paper-input>
        </template>
    </dom-module>
    <script>
        HTMLImports.whenReady(function(){
            console.log("called"); //Never gets called!
            Polymer({
                is: 'my-element'
            });
        });
    </script>

my-element.html(版本 4b(：

    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="http://polygit.org/components/polymer/polymer.html">
    <link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
    <dom-module id="my-element">
        <template>
            <paper-input></paper-input>
        </template>
    </dom-module>
    <script>
        Polymer({
            is: 'my-element'
        });
    </script>

非常感谢

@ScottMiles和@akc42的帮助！

我的麻烦原来来自ClouldFlare的云服务。他们的缓存系统大量重写了我几乎所有的导入文件。

在我绕过CloudFlare的云之后，Chromium对版本1和4感到满意;Iceweasel抱怨"ReferenceError：聚合物未定义"，但在版本4中显示正确的页面。

尽管如此，我还是很喜欢他们的服务。所以，我会看看我是否能获得他们的帮助。(目前我正在使用他们的免费服务(

同时，我将尝试vulcanize查看压缩的单个文件是否不受ClouldFlare缓存系统的影响。

如果有人慷慨地分享您在ClouldFlare和Polymer方面的成功经验，我将不胜感激。

(编辑(在我绕过CloudFlare的云之后，Chromium和Iceweasel都可以完美地处理上述4个版本。

(编辑2(我很高兴引用ClouldFlare对我的帮助请求的迅速回复如下：

This is strange- can you reenable CloudFlare on your trial subdomain and try a few things to see if we can narrow this down:
- Go to the 'Speed' page on the dashboard.
- Disable Rocket Loader by setting it to off
- If this doesn't correct the issue, try toggling the Minify options off at the top of the Speed page.
Rocket loader is a beta feature and so can sometimes cause issues- it is difficult to ensure 100% compatibility with all javascript on the web.

在我按照ClouldFlare的专家告诉我的那样禁用火箭装载机后，我遇到的所有问题都消失了！我很高兴将这个问题标记为answered.

你不需要

等待任何东西来调用Polymer({is:'my-element'}); 你所做的是有一个现成的函数，你调用Polymer的对象告诉你它什么时候准备好了。

<!DOCTYPE html>
<html>
<head>
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="http://polygit.org/components/polymer/polymer.html">
    <link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
</head>
<body>
    <dom-module id="my-element">
        <template>
            <paper-input></paper-input>
        </template>
    </dom-module>
    <script>
     Polymer({
       is: 'my-element',
       ready: function() {
         console.log('element ready')
       }
     });
    </script>
    <my-element></my-element>
</body>
</html>

通常，您会在要导入的另一个文件中声明my-element对象。

此外，如果要在索引级别使用任何数据绑定.html则可以使用该元素，然后可以侦听其中的所有元素，因此

<body>
  <template is="dom-bind" id="app">
    <my-element></my-element>
  </template>
  <script>
   var app = document.getElementById('app');
   app.addEventListener('dom-change', function() {
    //perform app initialisation here
   });
  </script>
</body>

相关内容

最新更新

热门标签：