templates - 如何在 Polymer 1.0 中对对象而不是数组使用 dom-repeat？

Question

迭代数组 myarray=[1, 2, 3]像这样工作:

<template is="dom-repeat" items="[[myarray]]">
    <span>[[item]]</span>
</template>

如何迭代对象 myobject = {a:1, b:2, c:3} ?

Answer 1

这是一个完整的实现:

<test-element obj='{"a": 1, "b": 2, "c": 3}'></test-element>

<dom-module id="test-element">
    <template>

        <template is="dom-repeat" items="{{_toArray(obj)}}">
            name: <span>{{item.name}}</span>
            <br> value: <span>{{item.value}}</span>
            <br>
            <hr>
        </template>

    </template>
    <script>
    Polymer({

        properties: {
            obj: Object
        },

        _toArray: function(obj) {
            return Object.keys(obj).map(function(key) {
                return {
                    name: key,
                    value: obj[key]
                };
            });
        }

    });
    </script>

</dom-module>