Question

Sono tornato con una nuova domanda e cerco ancora un aiuto esperto!

Nel mio progetto Polymer 0,5 avevo una matrice JSON passato a una proprietà come questa:

<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>

e nell'elemento I inizializzato l'array vuoto all'interno created simili:

created: function(){ 
 
    this.data=[]; 
 
}

Con Polymer 1.0 le proprietà sono ora scritti in un approccio diverso:

properties: { 
 
    max: {type: String}, 
 
    data: [] //(not sure this is the corrent approach! I also tried data: Object) 
 
}

Poi, come 0,5 ho provato inizializzare l'oggetto vuoto in modo simile, ma ottenere data is undefined (vedere lo screenshot allegato) errore nella console JavaScript.

Ecco il frammento di che sto usando per inizializzare l'array JSON:

created: function(){ 
 
    this.data = []; 
 
}

L'iterazione è scritto all'interno dell'elemento come questo:

<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>

Come posso realizzare questo?

Answer 1

Sei davvero sulla buona strada! Ecco come è possibile dichiarare una proprietà di matrice:

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

sul modello di associazione dati Tuttavia, è necessario fare in modo che non vi siano spazi bianchi all'interno del tag. In sostanza, si dovrà riscrivere queste righe

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

a questo

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

Fonti:

• 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