聚合物导入不渲染答案

【问题标题】：Polymer import not rendering聚合物导入不渲染
【发布时间】：2015-02-25 01:08:59
【问题描述】：

我之前遇到过很多次这种情况，但我仍然无法解决它。当我导入从 Bower 下载的核心/纸张元素时，有时导入会阻止我的页面加载，所以我最终会出现一个空白屏幕。我已经设法通过将 url 导入元素而不是 bower 来解决这个问题。我能够创建一个包含许多输入文本的简单聚合物元素，但是今天当我创建一个简单的数据绑定元素时，我的页面将无法加载。

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
    <link rel="import" href="hello-name.html">
    <script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script> 
</head>
<body>
    <p><hello-name></hello-name><p>
</body>
</html>

你好名字.html

<polymer-element name="hello-name">
    <template>
        <h1>Hello {{name}}</h1>
        <input type="text" value="{{name}}> 
    </template>
    <script>
        Polymer('hello-name', {
            ready: function() {
                this.name = "World";
            }
        })
    </script>
</polymer-element>

【问题讨论】：

更改为<input type="text" value="{{name}}">。 Here is a plunker，一切似乎都很好

标签： polymer

【解决方案1】：

我可以看到的一个潜在问题是您希望将 webcomponents.js 放在您的导入之上。

空白屏幕的另一个常见原因是当您有一些带有 html 声明但没有相应脚本的元素时，这会造成 Polymer 正在等待其脚本加载和执行的情况。您可以通过在浏览器控制台中运行 Polymer.waitingFor() 查看 Polymer 正在等待的元素。

【讨论】：

在聚合物 1.7+ 中是否有 Polymer.waitingFor() 的替代品 - 我遇到了一个类似的问题，不知道如何调试它。基本上我的 404 重定向页面只有在我没有在其中导入纸质按钮/纸质材料时才能正确显示...

【解决方案2】：

您不需要在主 html 页面中使用 Polymer.html，您需要将其包含在您的自定义元素中。

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="hello-name">
    <template>
        <h1>Hello {{name}}</h1>
        <input type="text" value="{{name}}> 
    </template>
    <script>
        Polymer('hello-name', {
            ready: function() {
                this.name = "World";
            }
        })
    </script>
</polymer-element>

【讨论】：

【解决方案3】：

我导入了几个月前创建的自定义元素，它似乎没有问题。我刚刚创建了另一个带有绑定的简单元素，它似乎也破坏了页面！我尝试将 polymer.html 放在自定义元素的顶部，并将 webcomponent.js 移到导入的顶部，但似乎不起作用。

【讨论】：

【解决方案4】：

目录结构很重要。假设你有；

/bower_components/polymer/polymer.html

在 bower_components 中创建一个目录并将您的组件放入该目录中，即

/bower_components/hello/hello.html

在hello.html里面加载polymer.html

<link rel="import" href="../polymer/polymer.html">

href 用于识别之前是否加载过元素。如果你不使用 ../polymer/polymer.html 浏览器尝试加载两次，你会得到一个空白页面。

【讨论】：

【解决方案5】：

如果您使用的是聚合物 1.0，请查看本指南：

https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html

显然你必须使用 js 代替并显式注册模块。

【讨论】：