首页 文章

如何使用聚合物元素

提问于
浏览 次
1

我正在使用Polymer的一些演示 . 这个在这里：

https://www.polymer-project.org/components/core-ajax/demo.html

有效的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax this.</title>
    <script src="../bower_components/platform/platform.js"></script>
    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../bower_components/core-ajax/core-ajax.html">
</head>
<body>
    <core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" 
        params='{"alt":"json", "q":"chrome"}'
        handleAs="json"></core-ajax>

    <template repeat="{{response.feed.entry}}">
        <div>{{title.$t}}</div>
    </template>

    <script>
        document.addEventListener('polymer-ready', function() {
            var ajax = document.querySelector("core-ajax");
            ajax.addEventListener("core-response", 
                function(e) {
                    document.querySelector('template').model = {
                        response: e.detail.response
                    };
                }
            );
        });
    </script>
</body>
</html>

哪个工作得很好 . 但我想将这个演示封装在一个名为“test-element.html”的聚合物元素中，但它不起作用：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">

<polymer-element name="test-element">
    <template>
        <core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" 
            params='{"alt":"json", "q":"chrome"}'
            handleAs="json"></core-ajax>

        <template repeat="{{response.feed.entry}}">
            <div>{{title.$t}}</div>
        </template>

        <script>
            document.addEventListener('polymer-ready', function() {
                var ajax = document.querySelector("core-ajax");
                ajax.addEventListener("core-response", 
                    function(e) {
                        document.querySelector('template').model = {
                            response: e.detail.response
                        };
                    }
                );
            });
        </script>
    </template>

    <script>
    Polymer('test-element', {

    });
    </script>
</polymer-element>

当我在index.html中使用元素并导入时，没有显示任何内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript Playground</title>
    <script src="../bower_components/platform/platform.js"></script>

    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="test-element.html">
    <link rel="import" href="ajax-feedback.html">
</head>
<body>
    <style>
    * {margin: 0; padding: 0;}
    </style>
    <h1>Hello World</h1>
    <test-element></test-element>
    <ajax-feedback></ajax-feedback>
</body>
</html>

请有人向我解释，为什么我不能只将demo的代码放在聚合物元素中，然后在我的index.html中重新导入它？

非常感谢你 .

乔治 .

javascript polymer

1 回答

  • 1

    两件事：document.querySelector（）赢了't work here: polymer elements use the shadow dom, which will hide the elements from CSS and querySelector(), and you'已经这么做了 . 你不应该在 <template> 中使用 <script> 标签，而且你不会使用't need to hard code JS to carry the response to where it' .

    这是简单的方法：

    <link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-ajax/core-ajax.html">

<polymer-element name="test-element" attributes="q">
    <template>
        <core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
            params='{"alt":"json", "q":"{{q}}"}'
            handleAs="json" response="{{response}}"></core-ajax>
        <template repeat="{{response.feed.entry}}">
            <div>{{title.$t}}</div>
        </template>
    </template>

    <script>
    Polymer({
        response: null,
    });
    </script>
</polymer-element>

    然后使用它：

    <test-element q="chrome"></test-element>
    回复于

相关问题