Polymer 1.0 Binding to sub-properties of not initialized object

Question

I'd like to do two-way data binding on not initialized object. It looks like this:

host-element.html

<template>
  <profile-basics-editor profile="{{profile}}"></profile-basics-editor>
</template>

JS:

Polymer({
  is: 'profile-editor',
  properties: {
    profile: {
      type: Object,
      notify: true
    }
  }
});

child-element.html

<template>
  <paper-input value="{{profile.nick}}"></paper-input>
  <paper-input value="{{profile.age}}"></paper-input>
</template>

JS:

properties: {
  profile:{
    type: Object,
    notify: true
  }
}

The problem is that the profile property on host element is not updated when I change input value. It is, however, updated inside a child element. But nothing get out of it.

I also tried path binding inside host element:

<profile-basics-editor 
   profile-nick="{{profile.nick}}" 
   profile-age="{{profile.age}}">
</profile-basics-editor>

child-element.html

properties: {
  profileNick:{
    type: String,
    notify: true
  },
  profileAge:{
    type: Number,
    notify: true
  }
}

But with the same result. Profile wasn't changed on the host side.

Finally, I've tried profile object initialization in host element:

profile: {
  type: Object,
  notify: true,
  value: function(){
    return {
      age: '',
      nick: ''
    };
  }
}

Then it worked.

So, after reading the docs for the 3rd time I'm wondering if it should work like this. I mean, do I really need to initialize an object at some point so the data binding will work? Is there a way to do it different?

Just to explain, profile object wasn't initialized because it is a registration form so there isn't any data to be initialized. And what if I receive profile data from the datastore without some properties because user hasn't filled them up earlier and the API doesn't send empty properties. It means that I need to check this object for lack of properties. It's not a JavaScript way to do it.

score 0 · Answer 1 · answered Jan 30 '17 at 09:14

Two-way bindings were quite a challenge for me, too. In such cases I try to help myself by sketching the flow of changes and events

case without initialisation
host               child              paper-input (age)
 |                  |                  |
profile=undefined  profile=undefined  value=undefined
                                      // typing
                                      value='v1'//->fire change event
                   //->receive change event
                   //set profile.age->no profile->done
case with initialisation
 |                  |                  |
profile=undefined  profile=undefined  value=undefined
//initialize with {age:''}
profile={age:''}
//->fire change
                   //->receive change
                   profile={age:''}
                   //->fire change
                                      //->receive change
                                      value=''
                                      //typing
                                      value='v1'//->fire change
                   //->receive change
                   profile.age='v1'

Polymer 1.0 Binding to sub-properties of not initialized object

1 Answers1