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
Post a Comment