Полимерный бумажный диалог в 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