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

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 。
  结果：
```
  差：0常规：好：优： 
```
中继器将book.votes[1] （ {"regular": 2} ）视为vote 。
- 无法找到vote.bad 。
- 它读取vote.regular并获得值2 。
- 它找不到vote.good 。
- 它找不到vote.excellent 。
  结果：
```
  不良： 常规：2良好：优异： 
```
中继器将book.votes[2] （ {"good": 201} ）视为vote 。
- 无法找到vote.bad 。
- 它无法找到vote.regular 。
- 它的读数为vote.good ，值为201 。
- 它找不到vote.excellent 。
  结果：
```
  差：常规： 好：201优： 
```
中继器将book.votes[3] （ {"excellent": 458}作为vote读。
- 无法找到vote.bad 。
- 它无法找到vote.regular 。
- 它找不到vote.good 。
- 它的读数为vote.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>

 <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 之前 / 之后}

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

问题描述

1 个解决方案

解决方案1
6 已采纳 2016-05-11 19:20:06

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

问题描述

1 个解决方案

解决方案1 6 已采纳 2016-05-11 19:20:06

解决方案1
6 已采纳 2016-05-11 19:20:06