聚合物嵌套 dom-repeat 模板乘以第二个模板

Question

我按照Polymer官方的例子嵌套模板，重复了第二个模板。

我的数组数据是这样的：

[
  {
    "title": "My title book",
    "author": "The author",
    "votes": [
      { "bad": 0 },
      { "regular": 2 },
      { "good": 201 },
      { "excellent": 458 } 
    ]
  },
  {
    "title": "My title book",
    "author":"The author",
    "votes": [
      { "bad": 0 },
      { "regular": 2 },
      { "good":201 },
      { "excellent": 458 }
    ]
  }
]

这是我的聚合物元素代码：

<template is="dom-repeat" items="{{books}}" as="book">
      <div><b>Title: </b><span>{{book.title}}</span></div>
      <div><b>Author: </b><span>{{book.author}}</span></div>
      <div>
        <p>Votes:</p>
        <template is="dom-repeat" items="{{book.votes}}" as="vote">
          <b>Bad: </b><span>{{vote.bad}}</span>
          <b>Regular: </b><span>{{vote.regular}}</span>
          <b>Good: </b><span>{{vote.good}}</span>
          <b>Excellent: </b><span>{{vote.excellent}}</span>
        </template>
      </div>
</template>

结果是：

标题：我的书名
作者：我的作者
票数：
差：0 普通：好：优秀：差：普通：2 好：优秀：差：普通：好：201 优秀：差：普通：好：优秀：458

Answer 1

book.votes中的每个元素包含bad、regular、good、或 excellent，但内部模板转发器假定所有投票类型都存在于每个对象中。也就是说，当只有一张选票可用时，模板会在每次迭代中输出所有选票的计数。

遍历四次迭代...

转发器将book.votes[0]（{"bad": 0}）读为vote。
- 它读取 vote.bad 并获得 0 的值。
- 找不到vote.regular。
- 找不到vote.good。
- 找不到vote.excellent。
  
  结果：
```
Bad: 0 Regular: Good: Excellent:
```
转发器将book.votes[1]（{"regular": 2}）读为vote。
- 找不到vote.bad。
- 它读取 vote.regular 并得到 2 的值。
- 找不到vote.good。
- 找不到vote.excellent。
  
  结果：
```
Bad: Regular: 2 Good: Excellent:
```
中继器将 book.votes[2] ({"good": 201}) 读作 vote。
- 找不到vote.bad。
- 找不到vote.regular。
- 它读取 vote.good 并得到 201 的值。
- 找不到vote.excellent。
  
  结果：
```
Bad: Regular: Good: 201 Excellent:
```
转发器将 book.votes[3] ({"excellent": 458}) 读为 vote.
- 找不到vote.bad。
- 找不到vote.regular。
- 找不到vote.good。
- 它读取 vote.excellent 并得到 458 的值。
  
  结果：
```
Bad: Regular: Good: Excellent: 458
```

如果打算一次显示所有投票结果，book.votes 应该是一个对象而不是对象数组：

"votes": {
  "bad": 0,
  "regular": 2,
  "good": 201,
  "excellent": 458
}

...并且应该删除内部模板转发器，直接绑定到 book.votes.*：

<div>
  <b>Bad: </b><span>{{book.votes.bad}}</span>
  <b>Regular: </b><span>{{book.votes.regular}}</span>
  <b>Good: </b><span>{{book.votes.good}}</span>
  <b>Excellent: </b><span>{{book.votes.excellent}}</span>
</div>

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-card/paper-card.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <template is="dom-repeat" items="{{books}}" as="book">
        <paper-card>
          <div><b>Title: </b><span>{{book.title}}</span>
          </div>
          <div><b>Author: </b><span>{{book.author}}</span>
          </div>
          <div>
            <p>Votes:</p>
            <div>
              <b>Bad: </b><span>{{book.votes.bad}}</span>
              <b>Regular: </b><span>{{book.votes.regular}}</span>
              <b>Good: </b><span>{{book.votes.good}}</span>
              <b>Excellent: </b><span>{{book.votes.excellent}}</span>
            </div>
          </div>
        </paper-card>
      </template>
    </template>
    <script>
      Polymer({
        is: 'x-foo',
        properties: {
          books: {
            type: Array,
            value: function() {
              return [{
                "title": "My title book",
                "author": "The author",
                "votes": {
                  "bad": 0,
                  "regular": 2,
                  "good": 201,
                  "excellent": 458
                }
              }, {
                "title": "The other book",
                "author": "The other author",
                "votes": {
                  "bad": 11,
                  "regular": 22,
                  "good": 33,
                  "excellent": 44
                }
              }];
            }
          }
        }
      });
    </script>
  </dom-module>
</body>

^{jsbin before / after}

聚合物嵌套 dom-repeat 模板乘以第二个模板

Polymer nesting dom-repeat templates multiplicate second template

javascript

templates

nested

repeat

polymer