我已经创建了自己的聚合物js元素,并试图对字典中的索引值执行repeat迭代。不幸的是我不能让它重复一遍。
下面是迭代-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>然后在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>这就是我在浏览器中呈现的结果:
<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>为什么对字典的迭代不能工作?
我有一个特殊的空白外部模板的阴影。控制台没有抛出任何错误。根据这里的说法,我应该能够用字典来做这件事。
发布于 2015-01-14 05:20:19
我认为您只能遍历数组对象,而不能遍历对象文本。但是,使用下面的筛选技巧,您可以将对象转换为数组。
<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>https://stackoverflow.com/questions/27934197
复制相似问题