CODEWITHSUNDEEP
javascriptpolymer
LoveAndHappiness
LoveAndHappiness

Reputation: 10135

How to Use Polymer Elements

I am working through some demo in Polymer. This one here:

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

The code that works looks like this:

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

Which works quite fine. But I want to encapsulate this demo inside of a polymer element, called "test-element.html", but it doesn't work:

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

Nothing is beeing displayed, when I use the element and import in inside my 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>

Please can someone explain to me, why I can't just put the code of the demo inside a polymer element and then reimport it inside my index.html?

Thank you very much.

George.

Upvotes: 2

Views: 1394

Answers (1)

Jerub
Jerub

Reputation: 42608

Two things: document.querySelector() won't work here: polymer elements use the shadow dom, which will hide the elements from CSS and querySelector(), and you've done this the hard way. You shouldn't need <script> tags inside <template>, and you don't need to hard code JS to carry the response to where it's going to be used.

This is the easy way:

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

And then to use it:

<test-element q="chrome"></test-element>

Upvotes: 1

Related Questions