Polymer 1.0 Binding to sub-properties of an uninitialized object

Question

I would like to do two-way data binding to an uninitialized 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 property profilefor the host element is not updated when the input value changes. However, it is updated inside the child. But nothing will come of it.

I also tried binding the path to the internal element of the node:

<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. profilehas not been changed on the host side.

Finally, I tried initializing the object profilein a node element:

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

Then he worked.

, , , . , - , ? -?

, profile , , . , profile - , , API . , - . JavaScript.

Answer 1

. ,

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'