Loop with nested polymer elements?
-
20-12-2019 - |
题
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:
解决方案
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.