Let's say I want to create a todo list with Polymer (v0.5.5). In my element, I define a property tasks
, which is an array containing a list of objects like { name: 'foo', done: false }
. I want to display the number of remaining tasks, so I need to detect when the property done
of an object included in the array is changed.
Here is an extract of the code:
<polymer-element name="todo-list">
<template>
<span>You have {{ tasks.length }} tasks, {{ remaining }} remaining</span>
...
</template>
<script>
Polymer({
tasks: [
{name: "foo", done: false},
{name: "bar", done: true}
],
get remaining() {
return this.tasks.filter(function(t) { return !t.done }).length;
}
changeState: function(e) {
var _task = this.tasks[e.target.getAttribute('data-task-id')];
_task.done = !_task.done;
}
});
</script>
</polymer-element>
With Firefox, it is working but not with Chrome (41.x). Indeed, Chrome only detect the change of the array itself (for example, if I add a new task, the remaining count is updated correctly).
How do I do that?
Thanks
Edit, regarding Andy answer
When I do that kind of thing:
var tasks = tasks: [
{name: "foo", done: false},
{name: "bar", done: true},
{name: "baz", done: false}
];
Object.observe(tasks, function() { alert('Modification'); }
and if I do a modification in the array itself (like in tasks.push({...})
), then a popup is displayed. But if I change a property of an object contained in the array (e.g. tasks[0].done = true
), then nothing happen. That's the source of my problem...