Question

根据polymer docs，可以使用repeat中的<template>语句迭代对象或数组：

＆＃34;表达＆＃34;可以是简单的标识符，路径或完整表达式（包括Object和Array文字）。

然而，在测试之后，似乎repeat语句仅适用于数组，而不适用于对象：

我做错了什么？

Answer 1

我最近遇到了这个问题并通过使用返回Object.keys(obj)的过滤器解决了这个问题。下面是一个如何操作的简单示例（也许有更好的方法，如果有的话，请赐教我）...

<template repeat="{{item in obj | getKeys}}">
  <span>Key: {{item}}</span>
  <span>Value: {{obj[item]}}</span>
</template>

...etc...

<script>
Polymer('my-element', {
  // yes i know, instantiate arrays/objects in the created method,
  // but this is just an example
  obj : {}, 

  // my custom filter function to use in looping objects
  getKeys : function(o){
    return Object.keys(o);
  }

});
</script>

当然，您可以更复杂，检查数据类型并确保其对象。下面是一个循环遍历无限嵌套对象的递归版本（再次，如果有更简单的方法，请告诉我）

<template if="{{obj}}" id="root" bind="{{obj as o}}">

  <ul>

    <template repeat="{{item in o | getKeys}}">
      <li>

        <span class="key">{{item}}</span>

        <template if="{{o[item] | isNotObject}}">
          <span class="value">{{o[item]}}</span>
        </template>

        <template if="{{o[item] | isObject}}">
          <template ref="root" bind="{{o[item] as o}}"></template>
        </template>

      </li>
    </template>

  </ul>

</template>

...etc...

<script>
Polymer('object-view', {

  obj : {},

  getKeys : function(o){
    return Object.keys(o);
  },

  isObject : function(v){
    return typeof(v) === "object";
  },

  isNotObject : function(v){
    return typeof(v) !== "object";
  }

});
</script>

这对我来说肯定有用，可以循环遍历对象（实际上是和数组）。虽然，我对使用Object.keys并不完全满意。我非常鼓励在聚合物中很快看到对物体迭代的支持。

Answer 2

那里的文档是不精确的。表达式的一般性质是明确的，但我不认为它打算说你可以重复迭代对象。

我认为目前只有Arrays支持迭代，尽管有人可能会支持NodeLists。

聚合物 - 在模板中迭代对象

2 个答案: