Loop with nested polymer elements?

StackOverflow https://stackoverflow.com//questions/25000509

  •  20-12-2019
  •  | 
  •  

Question

As far as I can tell from the documentation here and here, the following should be right. But it's not working. I get no errors. My page just says "test test" (You'll see why in the code). What is wrong?

NOTE I had this working fine with core-ajax directly in a single blog entry, so I know my data is fine, etc

slog-entry.html this is the element for each entry in my demo blog app

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

<polymer-element name="slog-entry" noscript>
    <template>
        <h1>{{entry.Title}}</h1>
        <p>{{entry.Text}}</p>
        <span>{{entry.timestamp}}</span>
    </template>
</polymer-element>

slog-entries.html this is the element for the collection of entries in my blog app

<link rel="import" href="../polymer/polymer.html">
<link href="../slog-entry/slog-entry.html" rel="import">
<polymer-element name="slog-entries" noscript>
    <template>
        <core-ajax auto
                   url="https://<server>/entries.json"
                   response="{{entries}}">
        </core-ajax>
        test
        <template repeat="{{entry in entries}}">
            <slog-entry bind="{{entry}}"></slog-entry>
        </template>
    </template>
</polymer-element>

slog.html this is the index

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Status Log 0.1b</title>
    <script src="templates/platform/platform.js"></script>
    <link href="templates/slog-entries/slog-entries.html" rel="import">
    <link href="templates/polymer/polymer.html" rel="import">
</head>
<body>
test
    <slog-entries></slog-entries>
</body>
</html>

UPDATE Here is what the DOM looks like:

enter image description here

Was it helpful?

Solution

Your syntax bind="{{entry}}" doesn't do what I suspect you want it to do.

Polymer binding uses a syntax like this <name of thing to bind to>="{{<source value>}}".

Now, in order to have a name of thing to bind to, elements must publish those names.

So, slog-entry has to look like this:

<polymer-element name="slog-entry" attributes="entry" noscript>

The attributes="entry" bit on the element causes slog-entry to accept bindings to property entry (this is what we call publishing).

Now your repeat can look like this:

    <template repeat="{{entry in entries}}">
        <slog-entry entry="{{entry}}"></slog-entry>
    </template>

We are telling the system to bind the entry property of each slog-entry to the entry value at each repeat.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top