javascript - 访问 Polymer 重复中的嵌套数组

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>

使用的过滤器是斯科特答案中的过滤器。

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>