Template repeat inside template repeat - 获取所有项目名称

Question

我正在尝试使用 polymer 1.0 实现一个网站。我有一个自定义元素 my-greeting，里面有一些模板重复。

我想做的是获取一个名为 TARGET 的字符串，如下所示：

/constantPath/folder1/aaa.jpg
/constantPath/folder1/bbb.jpg
/constantPath/folder2/aaa.jpg
/constantPath/folder2/bbb.jpg

所以一般的字符串是：/constantPath/{{repeat1.id}}/{{repeat2.id}}.jpg

我该怎么做？？

这是我的代码：

<dom-module id="my-greeting">
  <template>
    <template is="dom-repeat" items="{{repeat1}}">
      <template is="dom-repeat" items="{{repeat2}}">
        Target : <iron-image src="TARGET"></iron-image>
      </template>
    </template>
  </template>

  <script>
    Polymer({
      is: 'my-greeting',
      ready: function() {
        this.repeat1 = [
            {id: 'folder1'},
            {id: 'folder2'}
        ];
        this.repeat2 = [
            {id: 'aaa'},
            {id: 'bbb'}
        ];
      }
    }
    );
  </script>

谢谢。

Answer 1

给你：

<dom-module id="my-greeting">
  <template>
    <template is="dom-repeat" items="{{repeat1}}" as="folderOne">
      <template is="dom-repeat" items="{{repeat2}}" as="folderTwo">
        Target : <span>{{getTarget(folderOne, folderTwo)}}</span></br>
      </template>
    </template>
  </template>

  <script>
    Polymer({
      is: 'my-greeting',
      ready: function() {
        this.repeat1 = [
            {id: 'folder1'},
            {id: 'folder2'}
        ];
        this.repeat2 = [
            {id: 'aaa'},
            {id: 'bbb'}
        ];
      },
      getTarget: function(folderOne, folderTwo){
        return "/constantPath/"+folderOne.id+"/"+folderTwo.id;
      },
    }
    );
  </script>
</dom-module>

Template repeat inside template repeat - 获取所有项目名称

Template repeat inside template repeat - get all item names

templates

repeat

polymer