iron-list
iron-list copied to clipboard
PolymerElements
Computed bindings persist when no item in list
Hi,
I've noticed this issue while having a property that auto-updates at regular intervals (lets say this is a property that counts something - like a ticker). You then have an iron-list where each item gets passed to a computed binding along with the above mentioned auto-updating property. When you try to clean the list up, by setting the "items" property to an empty array, the previous bindings still get computed.
Here is some code that illustrates the problem:
iron-list-binding-issue.html
<link rel="import" href="../polymer/polymer.html">
<!-- Iron elements -->
<link rel="import" href="../iron-list/iron-list.html">
<dom-module id="iron-list-binding-issue">
<template>
<div class="layout vertical">
<a href="#" on-tap="_cleanList">Clean</a>
<iron-list items="[[collection]]" as="model" class="flex">
<template>
<div>[[model.title]] - [[_computeProgress(ticker, model)]]</div>
</template>
</iron-list>
</div>
</template>
<script>
Polymer({
is: "iron-list-binding-issue",
properties: {
ticker: {
type: Number,
notify: true,
value: 0,
},
collection: {
type: Array,
notify: true,
}
},
_interval: null,
attached: function() {
var collection = [];
for (var i = 0; i < 10; i++) {
collection.push({
title: "model #" + i,
difficulty: Math.random(),
});
}
this.set("collection", collection);
this._interval = window.setInterval(function() {
var val = this.get("ticker");
val += 1;
this.set("ticker", val);
}.bind(this), 1000);
},
detached: function() {
window.clearInterval(this._interval);
},
_computeProgress: function(ticker, model) {
console.log("_computeProgress");
console.log(ticker);
console.log(model);
return ticker / model.difficulty;
},
_cleanList: function(e) {
e.preventDefault();
e.stopPropagation();
this.set("collection", []);
},
});
</script>
</dom-module>
demo.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>seed-element Demo</title>
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-list-binding-issue.html">
</head>
<body unresolved>
<iron-list-binding-issue></iron-list-binding-issue>
</body>
</html>
With the code above, initially you see the list getting updated once a second. When you check out the console log, you'll see some output from the "_computeProgress" method. If you then click the "Clean" button, the list gets cleaned up, but in the console output, the calls the "_computeProgress" still get shown once per second.
I've also tried the above code with template dom-repeat and it works correctly.
Best, Alex
The issue is confirmed. This happens because the physical items aren't detached from the DOM.
