字典上的聚合物重复不适用于索引

Question

I've created my own polymer js elements, and am trying to do a repeat iteration over the index values in a dictionary. 我创建了自己的polymer js元素，并尝试对字典中的索引值进行repeat迭代。 Unfortunately I can't get it to repeat. 不幸的是我无法重复。

Here's my iterative-example.html: 这是我的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: 然后在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. 我有影子dom的特殊空白外部模板。 There aren't any errors being thrown by the console. 控制台没有抛出任何错误。 According to here I should be able to do it with dictionaries. 根据这里，我应该能够用字典做到这一点。

Answer 1

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>

字典上的聚合物重复不适用于索引

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-01-14 05:20:19

字典上的聚合物重复不适用于索引

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-01-14 05:20:19

解决方案1
0 已采纳 2015-01-14 05:20:19