I'm currently diving into the world of Polymer. My goal is to connect an array with my user interface in a way that allows for dynamic updates. Each object within the array contains a changing property, and I want my UI to reflect these changes accordingly. Here's how I've structured my Polymer component:
my-component.html
<dom-module id="my-component">
<template>
<h1>Hello</h1>
<h2>{{items.length}}</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr repeat="{{ item in items }}">
<td>{{ item.name }}</td>
<td>{{ item.status }}</td>
</tr>
</tbody>
</table>
<br />
<button on-click="testClick">Test</button>
</template>
<script>
// element registration
Polymer({
is: "my-component",
properties: {
items: {
type: Array,
value: function() {
return [
new Item({ name:'Tennis Balls', status:'Ordered' }),
new Item({ name:'T-Shirts', status: 'Ordered' })
];
}
}
},
testClick: function() {
for (var i=0; i<items.length; i++) {
if (items.name === 'Tennis Balls') {
items[i].status = 'Shipped';
break;
}
}
}
});
</script>
</dom-module>
The component displays, but the data bindings are not functioning as expected.
- The line displaying
{{ items.length }}doesn't show the count properly. - Only the first item appears in the list, while the second one does not.
- Upon clicking the Test button, the status update isn't reflected on the screen.
Although everything seems right at first glance, the faulty behavior indicates incorrect setup of data-binding. The issues with items.length and the initial rendering of array items have left me perplexed. What am I missing here?