0.8 中的嵌套 x-repeat 元素

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 中的设计限制，还是有办法指定名称，例如 {{i in items}} 在 0.5?

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

对比

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

0.8 中的嵌套 x-repeat 元素

nested x-repeat element in 0.8

polymer