I'm trying to transfer some code from Polymer 0.5 to 1.x, this means moving from the main list to the iron list. However, I cannot understand the iron equivalent of how I added items to the main 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> {{model.name}}</div>
</template>
</core-list>
which is called updated through ...
document.querySelector('core-list').data = $.parseJSON('[{"name":"One"},{"name":"Two"}]');
Anyone have any suggestions?
Update: July-23-2015 12:20 PM PST @Zikes
After the published sentence, I have the 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 this is set up correctly, how can I access the addItem method from another place?
Update: July-23-2015 1:58 pm PST @Zikes
Below is my current code. Although I can manipulate the array, the values added to it in the finished or addItem method are not 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.myItems=[{name:item}];
alert(this.myItems[0].name);
},
ready: function() {
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>