पॉलिमर 1.0 जेएसओएन स्ट्रिंग को प्रोपर्टी

Question

के रूप में पास कर रहा है, मैं एक बार फिर से नए प्रश्न के साथ हूं और विशेषज्ञ सहायता की तलाश में हूं!

मेरी पॉलिमर 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=[]; 
 
}

पॉलिमर 1.0 के साथ गुण अब एक अलग दृष्टिकोण में लिखे गए हैं:

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

फिर 0.5 मैं इसी तरह से खाली ऑब्जेक्ट को प्रारंभ करने की कोशिश की है, लेकिन हो रही data is undefined की तरह (कृपया संलग्न स्क्रीनशॉट देखें) जावास्क्रिप्ट कंसोल में त्रुटि।

यहाँ टुकड़ा मैं 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">&nbsp;</span>--> 
 
      <div class="clear"></div> 
 
     </div> 
 
     <div class="rack-value">{{item.value}}</div> 
 
     <div class="clear"></div> 
 
    </div> 
 
</template> 
 
      </div> 
 
     </template>

मैं इसे कैसे पूरा कर सकता हूं?

Answer 1

आप वास्तव में सही रास्ते पर हैं! यहां आपके द्वारा किसी सरणी संपत्ति की घोषणा कर सकते हैं:

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

अपने डेटा-बाइंडिंग टेम्पलेट पर फिर भी, आप यह सुनिश्चित करें कि वहाँ टैग अंदर कोई खाली स्थान के हैं बनाने के लिए की है। ,

• 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