Ich bin zurück mit neuer Frage und auf der Suche nach Expertenhilfe noch einmal!Polymer 1.0 übergeben JSON String als Proprty
In meinem Polymer 0,5-Projekt hatte ich auf eine Eigenschaft wie folgt übergeben JSON-Array:
<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>
und im Element initialisiert ich das leere Array innerhalb created
wie folgt aus:
created: function(){
this.data=[];
}
Mit Polymer 1.0 den Eigenschaften nun in einem anderen Ansatz geschrieben werden:
properties: {
max: {type: String},
data: [] //(not sure this is the corrent approach! I also tried data: Object)
}
Dann wie 0.5 habe ich versucht, das leere Objekt in ähnlicher Art und Weise initialisieren, aber immer data is undefined
(Bitte beachten Sie den beigefügten Screenshot) Fehler in der JavaScript-Konsole. Hier
ist das Snippet ich das JSON-Array zu initialisieren bin mit:
created: function(){
this.data = [];
}
Die Iteration wird innerhalb des Elements wie folgt geschrieben:
<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>
Wie kann ich das erreichen?
Fast perfekte Antwort, nur ein paar schnelle Notiz. "data: []" sollte nicht verwendet werden, sondern "data: function() {return [];}" ref -> https://www.polymer-project.org/1.0/docs/devguide/properties.html # configure-values – smokybob
@Neil: danke! es hat für mich funktioniert. –
@smokybob: Was ist der Unterschied zwischen Daten: [] und Daten: function() {}. Wenn data: [] den Standardwert initialisiert (in diesem Fall ein leeres Array), warum sollte ich eine Funktion verwenden, um dieselbe zurückzugeben? bitte hilf mir zu verstehen. –