Achieving two way data binding in structured object

2
votes

I'm trying to update a project of mine to work with Polymer 1.0, and I've gotten stuck on the whole two-way-binding and notification system. Where Polymer 0.5 took care of this for you I can't seem to be able to do this in 1.0.

I have to create an object for my API looking like this: 

{
    "create": [{
        "classes": ["Person"],
        "HasName": [{
            "givenNames": ["Paula"],
            "familyNames": ["Vaandrager"]
            }]
        }, {
            "id": "bvhme",
            "classes": ["Person", "User"],
            "HasName": [{
                "givenNames": ["Boris", "Hendrik"],
                "familyNames": ["van Hoytema"]
            }, {
            "givenNames": ["Boris", "Hendrik"],
            "familyNames": ["Vaandrager"]
            }]
        }]
    }

I've figured out how to render this using dom-repeat elements, but if I make an iron-input whenever I change that the changes do not propagate into my model.

Ideally I'd even create an element for editing every object and for the sub-objects inside it. But I feel overwhelmed by the complexity of this if I have to specify every single notification that can happen, aside from me not understanding what these things do at all as well.

3
polymerpolymer-1.0

3 Answers

1
votes

You can bind a complex object using deep path observation.

The binding would look like data="{{object.*}}"

1
votes

It looks like you are looking how to observe changes to arrays, if so, I advise looking at the answers in Polymer 1.0 'array-style' path accessors, alternative to bracket notation in expressions

In general, your solution should involve deep path observers as Zikes said and notify:true for various values.

properties: {
  fields: {
    type: Array,
    notify: true
  },
},
someFunction: function() {
  this.set('fields.' + index, value);
}

and if you need to observe additions and removals to the array, please check out array splicing observers https://www.polymer-project.org/1.0/docs/devguide/properties.html#array-observation

0
votes

It turns out the trouble I was having had to do with Polymer's inability to observe Arrays that consist of Strings. So you'll have to use arrays of objects instead.