當刪除其他陣列項目時，dom-repeat中的聚合物紙張對話框打開

Question

這是一個片段：

<template is="dom-repeat" items="{{zones}}" as="zone">
  <paper-button on-tap="_openSettings">Open Settings
  </paper-button>
  <paper-dialog id="[[_getZoneSettingsId(zone.id)]]" class="zone-settings">
    <input type="button" class="delete-zone" value="Delete zone" on-tap="_deleteZone"/>
  </paper-dialog>
</template>

<script>   
  Polymer({
    ...,
    _openSettings: function(e) {
      var zone = e.model.zone;
      this.$$("#" + this._getZoneSettingsId(zone.id)).open();
    },

    _getZoneSettingsId: function(zoneId) {
      return "zone-settings-" + zoneId.toString();
    },

    _deleteZone: function(e) {
      var zone = e.model.zone;
      var zones = this.zones.slice(0);
      for (var i = zones.length - 1; i >= 0; i--) {
        if(zone.id === zones[i].id) {
          zones.splice(i, 1);
        }
      }
      this.set("zones", zones);
    }
  })
</script>

在此對話框中可以做的一件事情就是從區域列表中刪除區域。 只要我刪除列表中的最后一個區域，此方法就可以正常工作。 但是，如果我有兩個區域並刪除第一個區域，則第二個區域的對話框會自動打開，就好像它已替換了第一個區域一樣。

我認為這與dom-repeat的工作方式有關，但是我不確定如何修復它。 有什么線索嗎？

Answer 1

要通知聚合物陣列中的變化，您必須使用陣列突變功能。 因此，您可以使用this.splice();

所有這些功能都可以在這里找到： https : //www.polymer-project.org/1.0/docs/devguide/model-data#array-mutation