Redux with Polymer and dom-repeat

100 views Asked by At

I have a problem with nested dom-repeat's and changes deep in arrays. Using redux I change properties on an array which has a structure like this:

[{some: 'value', members: [{ id: 13, hobbies: [{id: 33, name:'hobbyname'}]}]}]

When for example a hobby is deleted from a member, I see when I have an observer method on this property and console.log the value of the array that it really changed, the hobby is gone.

The DOM does however not change. The structure of that is something like:

<template id="teamslist" is="dom-repeat" items="[[teams]]">
<template is="dom-repeat" items="[[item.members]]" as="member">
<template is="dom-repeat" items="[[member.hobbies]]" as="hobby">

I tried notifying the dom-repeat like this but it does not help:

this.notifyPath('teams[0].members[0].hobbies.length');

Calling render() on the dom-repeat (top-level) does not seem to help either:

this.$.idfordomrepeat.render()

What am I doing wrong here..?

2

There are 2 answers

1
vikdoro On

Note that the path segments should be separated by dots. Look here.

Try this.notifyPath('teams.0.members.0.hobbies');

Does that work?

2
Maarten On

In the end it was a problem with the Redux state not being updated where I thought it was (Redux noob...) When that was fixed the notifyPath wasn't needed, and nor was the render() call.