首页 > 解决方案 > 计算绑定未检测到铁列表中的变化

问题描述

聚合物 1,我在铁列表中:

  <iron-list
    id="ironList"
    scroll-target="[[ironListScrollTarget]]"
    items="[[itemCollectionCopy]]">

    ...

        <div class="text center-justified info-icon">
          <iron-icon
            hidden="[[!_isDirtyData(item.*, itemCollectionCopy)]]"
            role="img"
            aria-label="Check-out information has been modified"
            title="Check-out information has been modified"
            icon="icons:info-outline"></iron-icon>
          <iron-icon
            hidden="[[_isDirtyData(item.*, itemCollectionCopy)]]"
            role="img"
            class="pristine-data"
            aria-label="Check-out information has been modified"
            title="Check-out information has been modified"
            icon="icons:info-outline"></iron-icon>
        </div>

    _isDirtyData: function(item) {
      console.log(item);
      return item.base.preferences;
    },


    setCustomPreference: function(e) {
      const id = e.detail.data.clientId;
      const preferences = e.detail.data.preferences;

      const foo = this.itemCollectionCopy.map((item) => {
          if (item.client_id === Number(id)) {
            item.preferences = preferences;
          }
          return item;
      });

      this.itemCollectionCopy = [];
      this.itemCollectionCopy = [...foo];
    },

向 中添加首选项对象时item.preferences,我无法获取计算绑定 hidden="[[_isDirtyData(item.*)]]"来检测更改。相反,我不得不添加看起来过多的整个数组itemCollectionCopyhidden="[[_isDirtyData(item.*, itemCollectionCopy)]]"

为什么计算的绑定不能检测到 just 的变化 hidden="[[_isDirtyData(item.*)]]"

标签: polymerpolymer-1.0iron-list

解决方案


聚合物观察属性变化的方式并不完美,他们添加了一些数组突变方法来改变数组并通知模板这种变化。

如果它们适用于您的特定情况,您可以使用它们。

https://polymer-library.polymer-project.org/1.0/docs/devguide/model-data#work-with-arrays

有时您想以 JS 方式执行操作,或者只是没有适合您的情况的数组变异方法。

有一个 notifyPath 方法也可以提供帮助。

this.notifyPath('myarray.*'); 

例如将触发所有相应的观察者。


推荐阅读