Polymer iron-list dynamically adding items? -


i'm trying migrate code polymer 0.5 1.x, means moving core-list iron-list. however, can not figure out iron equivalent how adding items core-list.

<core-list height="85"> <template> <div class="{{ {selected: selected} | tokenlist }}" style="padding:5px;"><paper-fab mini icon="arrow-forward" title="arrow-forward"></paper-fab> <!--{{index}}-->{{model.name}}</div> </template> </core-list> 

which called updated via...

document.queryselector('core-list').data = $.parsejson('[{"name":"one"},{"name":"two"}]'); 

anyone have suggestions?


update : jul-23-2015 12:20pm pst @zikes

following suggestion posted, have following.

<dom-module id="my-element">   <template>     <iron-list items="[[myitems]]" as="item">       <template>         <div>[[item.name]]</div>       </template>     </iron-list>   </template>   <script>     polymer({       is:'my-element',       properties: {         myitems: array       },       additem: function(item) {         this.push('myitems', {name: item});       }     });   </script> </dom-module> 

if setup right, how go calling additem method elsewhere?


update : jul-23-2015 1:58pm pst @zikes

following current code. while can manipulate array, values added in ready or additem method not being displayed.

<dom-module id="fnord-element">   <template>     <iron-list items="[[myitems]]" as="item">       <template>         <div class="item">[[item.name]]</div>       </template>     </iron-list>   </template>   <script>     polymer({       is:'fnord-element',       properties: {         myitems: {             type: array,             notify: true         }       },       additem: function(item) {         //this.push("myitems", {"name":item});         this.myitems=[{name:item}];         alert(this.myitems[0].name);         //alert(item);       },       ready: function() {         //alert('fnord');         this.myitems=[{name:"one"},{name:"two"}];       }     });   </script> </dom-module> <fnord-element id="fnord"></fnord-element> <paper-button raised onclick="document.queryselector('#fnord').additem('john doe');">test</paper-button> 

iron-list uses items property generate items, similar dom-repeat. can bind array in component, so:

<dom-module id="my-element>   <template>     <iron-list items="[[myitems]]">       <template>         <div>[[item]]</div>       </template>     </iron-list>   </template>   <script>     polymer({       is:'my-element',       properties: {         myitems: array       }     });   </script> </dom-module> 

then, follow the rules modifying array property , you're set!


Comments

Popular posts from this blog

javascript - Karma not able to start PhantomJS on Windows - Error: spawn UNKNOWN -

Nuget pack csproj using nuspec -

c# - Display ASPX Popup control in RowDeleteing Event (ASPX Gridview) -