dom-repeat 中的 Polymer paper-dialog 在删除其他数组项时打开

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

dom-repeat 中的 Polymer paper-dialog 在删除其他数组项时打开

Polymer paper-dialog in dom-repeat opens when other array item is deleted

javascript

polymer

polymer-1.0

dom-repeat