Polymer Repeat over dictionary 不适用于索引

Question

我已经创建了自己的聚合物 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>

为什么对字典的迭代不起作用？

我有阴影专用的空白外部模板dom。控制台没有抛出任何错误。根据here我应该可以用字典来做。

Answer 1

我认为你只能遍历数组对象而不是对象字面量。但是，使用以下过滤器技巧，您可以将对象转换为数组

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

Polymer Repeat over dictionary 不适用于索引

Polymer Repeat over dictionary doesn't work for index

javascript

polymer

material-design