Question

我有一个users数组，如下所示：

        [{
            "name": "John",
            "surname": "McClane",
            "prefs": [{
                "Gourmande": 1,
                "Espiegle": 0
            }]
        },
        {
            "name": "Robert",
            "surname": "DeNiro",
            "prefs": [{
                "Gourmande": 1,
                "Espiegle": 0
            }]
        },
        {
            "name": "Siegfried",
            "surname": "Klause",
            "prefs": [{
                "Gourmande": 1,
                "Espiegle": 0
            }]
        }]

我在模板中访问的内容如下：

<ul class="userlist">
    <template repeat="{{ user in users }}">
        <li class="user">
            {{user.name}} preferences are listed below : <br>
            <template repeat="{{ pref in user.prefs }}">
                - {{ pref }} <br>
                <!-- {{ pref.Gourmande }} works fine, but I want to display "Gourmande" -->
            </template>
        </li>
    </template>
</ul>

我无法迭代prefs。我尝试过上面的配置，使用类似数组的表示法（user.prefs[0]，user.prefs.slice(0)）嵌套模板标签，但都无济于事。

有人能指出我正确的方向吗？我想做的是最终能够列出prefs数组的键/值对（因为它的名称/大小将不断变化）。

谢谢。

编辑：我找到了解决方案，感谢您建议的过滤器：

    <template repeat="{{ pref in users.prefs }}">
        <template repeat="{{k in pref | keys}}">
            <li class="pref">
                {{ k }} : {{ pref[k] }}
            </li>
        </template>
    </template>

使用的过滤器是Scott的回答。

Answer 1

您不能在对象上使用template repeat，只能在数组上使用。

您可以接近所需的语法：

<template repeat="{{key in object | keys}}">
  {{key}}: {{object[key]}}<br>
</template>

其中keys是原型的过滤器：

keys: function(object) {
  return Object.keys(object);
}

http://jsbin.com/ciduhe/3/edit

Answer 2

您可以编写自己的过滤器来为您提供对象的密钥，并使用它来重复您的对象。

例如：

<polymer-element name='my-elem'>
  <template>
    <ul>
    <template repeat="{{key in obj | objectKeys}}">
      <li>{{key}} - {{obj[key]}}</li>
    </template>
    </ul>
  </template>
  <script>
    Polymer('my-elem', {
      obj: {a: 1, b: 2, c: 3},
      objectKeys: function(inp) {
        var keys = Object.keys(inp);
        // important, as Object.keys may come in arbitrary order
        keys.sort(); 
        return keys;
      }
    });
  </script>
</polymer-element>

尝试使用此jsbin：http://jsbin.com/hozahupa/1/edit

Answer 3

我发现了这个项目的提交，他们使用过滤器函数将对象值转换为数组

src/juicy-tree.html

这会产生很好的模板表达式（<template repeat="{{ user.prefs | objectValues as pref }}">），但问题是没有与原始用户对象的prefs属性绑定数据。

如果您只需要一次性绑定，这可能没问题。

Answer 4

我在数组中使用了一个数组，如下所示：

<polymer-element people="[[1, "Brad B"], [2, "Alis A"], [3, "Samon S"]]">
</polymer-element>

<polymer-select value="{{ person }}">
  <option repeat="{{person in people}}" template value="{{person[0]}}">{{person[1]}}
  </option>
</polymer-select>

enter image description here

访问Polymer repeat中的嵌套数组

4 个答案: