CODEWITHSUNDEEP
polymer-1.0
clay
clay

Reputation: 6017

Bind array data to element, and change the array

What is the pattern to bind an array of data to an element, and have that element "auto update" when any part of the array changes?

Say in a script I bound an array to app.game.gameData = [] and then bound that array to an element

<template is="dom-bind" id="app">
...
  <game-mat screens={{game.gameData}}></game-mat>

I have my game-mat element set up with dom-repeat, it passes values to sub-elements, etc.

But I want game-mat to update when I add a new item to game.gameData. Show the new row, etc. And, I want the sub-elements to change because of the binding set up, like if I change game.gameData[3].value = 50, I want that to be reflected in that sub element.

From what I can tell now, the only array that renders is the initial one created.

I want to manipulate this data and have it be reflected in that list of elements. Any good way to do that?

(I'd gladly change my existing patterns around, just don't know of a way to go about this right now...)

Upvotes: 1

Views: 484

Answers (1)

Alon
Alon

Reputation: 2929

Update Your array with push, pop, splice, shift, unshift methods.

for example push object to this.employees:

 this.push('employees', { first: 'Jack', last: 'Aubrey' });

or set sub-element

 this.set('employees.0.manager.type', 'engineer');

for more information you can read the polymer guide for arrays in https://www.polymer-project.org/1.0/docs/devguide/templates.html

Upvotes: 1

Related Questions