Question

我正在使用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>

哪个工作得很好。但是我希望将这个演示封装在一个名为＆＃34; test-element.html＆＃34;的聚合物元素中，但它不起作用：

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

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

非常感谢。

乔治。

Answer 1

两件事：document.querySelector（）在这里不起作用：聚合物元素使用阴影dom，它将隐藏CSS和querySelector（）中的元素，你已经很难完成了。您不应该在<script>内部使用<template>标记，并且您不需要硬编码JS来将响应带到它将被使用的位置。

这是一种简单的方法：

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

如何使用聚合物元素

1 个答案: