当导入数量和文件大小很大时，无法使Polymer准备就绪

时间：2016-02-17 12:58:08

标签： polymer

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

以下index.html简化版的真实版本在 localhost 中的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的函数永远不会被调用。此外，Iceweal抱怨ReferenceError: Polymer is not defined。

然后我借用this technique来获得此版本（版本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()永远不会被调用。

我也尝试了this technique并使简化代码看起来像这样（版本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显示预期的正确页面。 Iceweasel抱怨ReferenceError: Polymer is not defined。

（编辑2） 我的测试结果与20分钟前的测试结果不同如下：

  • 版本2：Chromium提供空白页面。 Iceweasel抱怨ReferenceError: Polymer is not defined。

  • 第3版：Chromium抱怨Uncaught ReferenceError: Polymer is not defined。 Iceweasel抱怨`ReferenceError：未定义聚合物＆＃39;。

我正在阅读note here。我会将index.html分成两部分，看看它是否会产生任何不同的结果。

（编辑3） 我伤心地报告，分裂index.html为两个文件并没有任何区别 - 二者铬和Iceweasel悄悄给空白页

（第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>

2 个答案:

答案 0 :(得分：1)

非常感谢@ScottMiles和@ akc42的帮助！

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

在绕过CloudFlare的云之后，Chromium对版本1和版本4感到满意; Iceweasel抱怨`ReferenceError：未定义Polymer'，但显示版本为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.

我禁用Rocket Loader后，ClouldFlare的专家告诉我，我遇到的所有问题都已消失了！我很高兴将此问题标记为answered。

答案 1 :(得分：0)

你不需要等待任何事情来调用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对象。

另外，如果你想在index.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>
相关问题
最新问题