Polymer Repeat over dictionary doesn't work for index
Question
I've created my own polymer js elements, and am trying to do a repeat iteration over the index values in a dictionary. Unfortunately I can't get it to repeat.
Here's my iterative-example.html:
<link href="../polymer/polymer.html" rel="import">
<polymer-element name="iterative-example">
<template>
<!-- Doesn't work -->
<template repeat="{{ lower, upper in letters }}">
<p>{{ lower }} and {{ upper }}</p>
</template>
<!-- Works -->
<template repeat="{{ letters in lettersArray }}">
<p>{{ letters }}</p>
</template>
</template>
<script>
Polymer('iterative-example', {
letters: {'a':'A', 'b':'B', 'c':'C'},
lettersArray: ['a', 'b', 'c']
});
</script>
</polymer-element>
Then in the index.html:
<html>
<head>
<script src="../webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="components/iterative-example.html">
</head>
<body>
<iterative-example></iterative-example>
</body>
</html>
This is what I end up with when it renders in the browser:
<iterative-example>
<template repeat="{{ lower, upper in letters }}">
#document-fragment
</template>
<template repeat="{{ letters in lettersArray }}">
#document-fragment
</template>
<p>a</p>
<p>b</p>
<p>c</p>
</iterative-example>
Why won't the iteration over the dictionary work?
I have the special blank outer template for the shadow dom. There aren't any errors being thrown by the console. According to here I should be able to do it with dictionaries.
1 answers
solution1
0 ACCPTED 2015-01-14 05:20:19
I think you can only itereate through array object not object literals. However using following filter trick you can trnasform your object to array
<polymer-element name="iterative-example">
<template>
<!-- Doesn't work -->
<template repeat="{{ letter in letters | toArray }}">
<p>{{ letter.lower }} {{ letter.upper }}</p>
</template>
<!-- Works -->
<template repeat="{{ letters in lettersArray }}">
<p>{{ letters }}</p>
</template>
</template>
<script>
Polymer('iterative-example', {
letters: {'a':'A', 'b':'B', 'c':'C'},
lettersArray: ['a', 'b', 'c'],
toArray:function (argument) {
var result = [];
for (var property in argument) {
if (argument.hasOwnProperty(property)) {
result.push({lower:property, upper:argument[property]});
}
}
return result;
}
});
</script>
</polymer-element>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.