聚合物纸对话框当其他阵列项目被删除

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