Polymer 1.0 übergeben JSON String als Proprty

Question

Ich bin zurück mit neuer Frage und auf der Suche nach Expertenhilfe noch einmal!

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">&nbsp;</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?

Answer 1

Sie sind tatsächlich auf dem richtigen Weg! Hier ist, wie Sie eine Array-Eigenschaft deklarieren:

properties: { 
    max: {type: String}, 
    data: { 
    type: Array, // Available property types are String, Number, Boolean, Array, and Object 
    value: function() { return []; } // Default value 
    } 
} 

Auf dem Datenbindungs ​​Vorlage jedoch müssen Sie sicherstellen, dass gibt es keine Leerzeichen innerhalb des Tags. Grundsätzlich werden Sie diese Zeilen umschreiben

<div class="rack-head"> 
    {{item.subhead}} 
</div> 

zu diesem

<div class="rack-head">{{item.subhead}}</div> 

Quellen:

• https://www.polymer-project.org/1.0/docs/devguide/properties.html#attribute-serialization
• https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#binding-to-text-content