我带着新问题回来了,再次寻求专家帮助!
在我的 Polymer 0.5 项目中,我有一个 JSON 数组传递给这样的属性:
<horizontal-barset max="3320000" data='[
{"title": "Annuals", "prevord": "1-15-2015",
"ds": [
{"subhead": "Last Year Sales", "value": "2960000", "className" : "last-year"},
{"subhead": "YTD", "value": "1956000", "className" : "ytd"},
{"subhead": "Previous Order", "value": "480000", "className" : "prev-order"}
]
},
{"title": "Perennials", "prevord": "1-15-2015",
"ds": [
{"subhead": "Last Year", "value": "540000", "className" : "last-year"},
{"subhead": "YTD", "value": "2140000", "className" : "ytd"},
{"subhead": "Previous Order", "value": "320000", "className" : "prev-order"}
]
},
{"title": "Totals", "prevord": "1-15-2015",
"ds": [
{"subhead": "Last Year", "value": "3320000", "className" : "last-year"},
{"subhead": "YTD", "value": "1350000", "className" : "ytd"},
{"subhead": "Previous Order", "value": "1700000", "className" : "prev-order"}
]
}
]'>
</horizontal-barset>
在元素中,我created
像这样初始化了里面的空数组:
created: function(){
this.data=[];
}
使用 Polymer 1.0,属性现在以不同的方法编写:
properties: {
max: {type: String},
data: [] //(not sure this is the corrent approach! I also tried data: Object)
}
然后像 0.5 一样,我尝试以类似的方式初始化空对象,但data is undefined
在 JavaScript 控制台中出现(请参阅随附的屏幕截图)错误。
这是我用来初始化 JSON 数组的片段:
created: function(){
this.data = [];
}
迭代是这样写在元素内部的:
<template is="dom-repeat" items="{{data}}">
<div class="rack-container">
<p>{{item.title}}</p>
<template is="dom-repeat" items="{{item.ds}}">
<div class="rack">
<div class="rack-bar">
<div class="rack-head">
{{item.subhead}}
</div>
<!--<span style="width:{{ (row.value / max) * 100}}%;line-height:2em;" class="{{row.className}} rack-fill"> </span>-->
<div class="clear"></div>
</div>
<div class="rack-value">{{item.value}}</div>
<div class="clear"></div>
</div>
</template>
</div>
</template>
我怎样才能做到这一点?