Question

我正在尝试将一些代码从Polymer 0.5迁移到1.x，这意味着从core-list转移到iron-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>

通过...更新名称

document.querySelector('core-list').data = $.parseJSON('[{"name":"One"},{"name":"Two"}]');

有人有任何建议吗？

更新：2015年7月23日下午12:20太平洋标准时间 @Zikes

根据发布的建议，我有以下内容。

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

如果设置正确，我将如何从其他地方调用addItem方法？

更新：2015年7月23日下午1:58太平洋标准时间 @Zikes

以下是我目前的代码。虽然我可以操作数组，但是不会显示ready或addItem方法中添加到它的值。

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

Answer 1

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>

然后，只需按照the rules for modifying an Array property进行操作就可以了！

聚合物铁列表动态添加项目？

1 个答案: