Question

是否可以执行以下操作：

         <template is="x-repeat" items="{{dataSource}}"> <!--called item-->
            <tr>
              <template is="x-repeat" items="{{columns}}"> <!--also called item-->
                <td data-title$="{{itemFromSecondRepeat.displayName}}">
                   {{}} <!--How to {{itemfromtopRepeat[itemFromSecondRepeat.name]}}-->
                </td>
              </template>
            </tr>
          </template>

问题在于这个x-repeat元素我无法弄清楚如何访问这些项，这是0.8中的设计约束还是有一种方法来指定名称，如{{1在{{i in items}}？

Answer 1

是的，这是可能的，但前提是你绑定到item的子属性。请参阅https://www.polymer-project.org/0.8/docs/devguide/experimental.html#x-repeat。

例如：

<template is="x-repeat" items="{{rows}}">
  <div>
      <span>{{item.letter}}</span>
      <template is="x-repeat" items="{{item.columns}}">
        <span>{{item.number}}</span>
      </template>
  </div>
</template>

其中：

properties: {
  rows: {
    type: Array,
    value: [{
      letter: 'A',
      columns: [{number: 1}, {number: 2}]
    }, {
      letter: 'B',
      columns: [{number: 3}, {number: 4}]
    }]
  }
}

产生这个：

A 1 2
B 3 4

我在测试时发现的有趣的事情是Polymer无法将{{item}}绑定到嵌套自定义元素的属性。相反，它似乎只有在传递item的各个子属性时才有效。

<x-grid-cell color={{item.color}}></x-grid-cell> // works

VS

<x-grid-cell cell={{item}}></x-grid-cell> // doesn't seem to work

嵌套的x-repeat元素为0.8

1 个答案: