Ton*_*haz 1 javascript templates nested repeat polymer
我按照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
每个元素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>