Question

我遵循Polymer官方示例嵌套模板，并重复第二个模板。

我的数组数据类似于：

var url = "https://pokeapi.co/api/v2/evolution-chain/1";

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

[
  {
    "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 }
    ]
  }
]

结果是：

标题：我的书名
作者：我的作者
投票：
差：0常规：良好：优秀：差：常规：2优秀：优秀：差：常规：良好：201优秀：差：常规：良好：优秀：458

Answer 1

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

完成四次迭代......

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

如果打算一次显示所有投票标记，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>

^{jsbin before / after}

聚合物嵌套dom-repeat模板将第二个模板复用

1 个答案: