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的特殊空白外模板。控制台没有抛出任何错误。根据{{3}}，我应该可以用词典来做。

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>

聚合重复字典对索引不起作用

1 个答案: