Polymer 1.0: Best Practice for Managing a Simple List of Elements

Question

I created a simple prototype to display and edit a list of people. The prototype can be found here: JSBin .

As you can see, when you click Save, the item is returned to the array using the array mutation API . I'm not sure if this is really necessary, since objects are always assigned by reference.

However, the Save button does not update the item in the list. But when you edit it again, the newly changed value is somehow saved in the form. I assume that the change occurs in memory, but dom-repeatdoes not start a new list rendering.

I also set the property observeto dom-repeat, but it doesn't seem to make any difference.

My question is twofold :

• What needs to be changed so that the list is updated after the item is saved.
• Is there a better way (common best practice) for managing lists of items (using two-way data binding).

Answer 1

Short answer: switch the save function to

app.save = function(e) {
   app.splice('people', app.selectedIndex, 1, {name: app.selected.name, surname: app.selected.surname});
   app.selectedIndex = -1;
};

Long answer:

, , , dom-repeat. dom-repeat , , . , , , . , , . , . , .

, . , dom-repeat , , , , . , , , ... , .

, , ? , Polymer " ", - , , . , Polymer node, . , "people". , "". , , ; app.selected.name - , , , app.people.0.name, , dom-repeat .

, , . , Angular, , .