Polymer iron list dynamically adds items?

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> <!--{{index}}-->{{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.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>
+4
source share
1 answer

iron-list items , dom-repeat. , :

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

Array, !

+5

Source: https://habr.com/ru/post/1599368/


All Articles