观察聚合物中的数组项修改

Question

假设我有一个对象数组

items: {
    type: Array,
    value: [
        {a : 'Sample1', b: 'true', c: 'demo1'},
        {a : 'Sample2', b: 'false', c: 'demo'}
    ]
}

此数组被送入具有 3 列的 vaadin 网格，第二列对应于字段 'b'。

 <vaadin-grid-column width="20px" >
 <template class="header">A</template>
 <template>
     <p>[[item.a]]</p>
 </template>
 </vaadin-grid-column>
     <vaadin-grid-column width="20px" >
 <template class="header">B</template>
 <template>
     <iron-icon icon="icon:mail"></iron-icon>
 </template>
 </vaadin-grid-column>
     <vaadin-grid-column width="20px" >
 <template class="header">C</template>
 <template>
     <p>[[item.c]]</p>
 </template>
</vaadin-grid-column>

我要的是item.b换了图标就换。那就是我要实现下面的伪代码

if(item.b == true) then
    change iron-icon's icon to 'icons:mail'
else
    change iron-icon's icon to 'icons:drafts'

目前，我做了以下事情：

<iron-icon icon="_changeIcon(item.b)"></iron-icon>
_changeIcon: function(flag) {
   return flag == false? 'icons:drafts' : 'icons:mail';
}

但这不起作用。有人可以帮我解决这个问题吗？

Answer 1

这看起来很简单——替换网格的项目——但是虽然这会更新值，但不会更新网格中的图标。我用 (1) a dom-if 和 (2) this.$.grid.clearCache()

解决了它

<dom-module id="grid-update">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <vaadin-grid id="grid" items="[[items]]">
      <vaadin-grid-column width="20px">
        <template class="header">A</template>
        <template>
           <p>[[item.a]]</p>
        </template>
      </vaadin-grid-column>
      <vaadin-grid-column width="20px" >
        <template class="header">B</template>
        <template>
          <template is="dom-if" if="[[item.b]]">
            <paper-icon-button icon="icons:mail" on-click="_selectItem"></paper-icon-button>
          </template>
          <template is="dom-if" if="[[!item.b]]">
            <paper-icon-button icon="icons:draft" on-click="_selectItem"></paper-icon-button>
          </template>
        </template>
      </vaadin-grid-column>
      <vaadin-grid-column width="20px" >
        <template class="header">C</template>
        <template>
           <p>[[item.c]]</p>
        </template>
      </vaadin-grid-column>
    </vaadin-grid>

    <iron-iconset-svg id="iconset" name="icons" size="24">
      <svg>
        <defs>
          <g id="mail">
            <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" class="style-scope iron-icon"></path>
          </g>
          <g id="draft">
            <path d="M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z" class="style-scope iron-icon"></path>
          </g>
        </defs>
      </svg>
    </iron-iconset-svg>
  </template>

  <script>
    /**
     * `grid-update`
     * 
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class GridUpdate extends Polymer.Element {
      static get is() { return 'grid-update'; }
      static get properties() {
        return {
          items: {
            type: Array,
            value: () => { return []; }
          }
        };
      }

      ready() {
        super.ready();
        this.items = [{a : 'Sample1', b: true, c: 'demo1'},
                {a: 'Sample2', b: false, c: 'demo2'}];
      }

      _selectItem(e) {
        let index = e.model.index;
        this.items[index].b = !this.items[index].b;
        this.$.grid.clearCache();
      }
    }

    window.customElements.define(GridUpdate.is, GridUpdate);
  </script>
</dom-module>

此代码可以复制到基本 PSK 元素中。

Here is a pen 试试看。

观察聚合物中的数组项修改

observe array item modification in polymer

javascript

vaadin-grid

polymer-2.x