1

我开始使用 Polymer 1.0：我唯一尝试过的是一个简单的模板，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

        <link rel="import" href="bower_components/polymer/polymer.html"></link>
        <link rel="import" href="bower_components/iron-icons/iron-icons.html">

        <title>Polymer test1</title>
    </head>
    <body unresolved>

        <dom-module id="pres-test">

        <template>

            <content></content>

            <p>This is my name:<h3>{{name}}</h3></p>
            <iron-icon icon="star" hidden="{{!star}}"></iron-icon>
            <img src="http://placehold.it/300x100"></img>

        </template>

    </dom-module>

    <script>
        Polymer({
            is:'pres-test',
            properties:{
                name:String,
                star:Boolean
            }
        });
    </script>

    <pres-test name="withStar" star>
        <h1>Example1:</h1>
        <img src="http://placekitten.com/g/200/180" alt="image"></img>
    </pres-test>

    <pres-test name="withoutStar">
        <h2>Example:</h2>
        <img src="http://placesheen.com/100/100"></img>
        <p>No star icon :()</p>
    </pres-test>


    </body>
</html>

这段代码在 Chrome 和 Opera 上运行良好，除了即使我没有将布尔星号放在预测试中，它仍然显示星号。

在 Firefox 和 IE 中，它只是在预测试中显示 h1 和 img。

在 Safari 中，它似乎不理解 dom-module、template 或 pres-test 之类的标签，因为它首先显示 dom-module 中的内容，然后显示 pres-test 中的内容，而不适应变量。

我寻找了 Polymer 的兼容性，但我只找到了 0.5 版本。

我做错了什么，还是只是与这些浏览器不兼容？

4

1 回答 1

4

只有 Chrome 支持在主文档中内联自定义元素定义。其他浏览器目前没有完整和适当的新标准和即将推出的标准的实现。

获取pres-test元素定义并将其移动到自己的 HTML 文件中，然后将其导入。

此外，您只需要导入其中一个 webcomponents.js 填充物 - 对于 Polymer 1.0，您需要使用webcomponents-lite.js.

总而言之，您将拥有两个文件：

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="pres-test.html">

        <title>Polymer test1</title>
    </head>
    <body unresolved>

    <pres-test name="withStar" star>
        <h1>Example1:</h1>
        <img src="http://placekitten.com/g/200/180" alt="image"></img>
    </pres-test>

    <pres-test name="withoutStar">
        <h2>Example:</h2>
        <img src="http://placesheen.com/100/100"></img>
        <p>No star icon :()</p>
    </pres-test>


    </body>
</html>

pres-test.html：

<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/iron-icons/iron-icons.html">

<dom-module id="pres-test">

    <template>

        <content></content>

        <p>This is my name:<h3>{{name}}</h3></p>
        <iron-icon icon="star" style$="{{getStarStyle(star)}}"></iron-icon>
        <img src="http://placehold.it/300x100"></img>

    </template>

</dom-module>

<script>
    Polymer({
        is:'pres-test',
        properties:{
            name: {
                type: String
            },
            star: {
                type: Boolean,
                value: false
            }
        },
        getStarStyle: function(star) {
            return star ? '' : 'display: none';
        }
    });
</script>
于 2015-06-11T17:39:32.020 回答