[英]Polymer paper-dialog in dom-repeat opens when other array item is deleted
Here is a snippet: 这是一个片段:
<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>
One of the things that can be done in this dialog is deleting the zone from the zones list. 在此对话框中可以做的一件事情就是从区域列表中删除区域。 This works fine as long as I delete the last zone in the list. 只要我删除列表中的最后一个区域,此方法就可以正常工作。 However, if I have two zones and delete the first one, the dialog for the second one automatically opens as though it has replaced the first one. 但是,如果我有两个区域并删除第一个区域,则第二个区域的对话框会自动打开,就好像它已替换了第一个区域一样。
I assume this has to do with how dom-repeat works, but I am not sure how to fix it. 我认为这与dom-repeat的工作方式有关,但是我不确定如何修复它。 Any clues? 有什么线索吗?
To notify polymer about changes in array, you have to use array mutation functions. 要通知聚合物阵列中的变化,您必须使用阵列突变功能。 So in your case you can use this.splice();
因此,您可以使用this.splice();
all these functions can be found here: https://www.polymer-project.org/1.0/docs/devguide/model-data#array-mutation 所有这些功能都可以在这里找到: https : //www.polymer-project.org/1.0/docs/devguide/model-data#array-mutation
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.