Polymer: this.set does not update the properties of the parent when additional properties change

Question

using polymer 1.1. The data binding does not seem to update correctly (as expected) with the following setting:

Polymer({
is: 'place-detail',
properties: {
  selectedplace: {
    type: Object,
    notify: true,
    reflectToAttribute: true  //testing
  }
},
observers: [
  'placeHandler(selectedplace)'
],
editName: function(newname) {
  if (newname !== this.selectedplace.name) {
    this.debounce('updateDescription', function(){
      this.set('selectedplace.name', newname);
      this.set('selectedplace.dirty', true);
    }, 1000);
  }
}
});

Passing newnameto the method editNameupdates the object selectedplace, and the changes propagate to the data bindings, observing {{selectedplace.name}}in the local DOM.

However, these changes do not apply to the property of the parent element, as well as to observers observing the object, for example placeHandler. For the work of observers, deep observation is required:

observers: [
  'placeHandler(selectedplace.*)'
]

Is this behavior expected? If so, how can I propagate this change to the attributes of the element.

Answer 1

, , . :

Polymer({
  is: 't-child',

  properties: {
    data: {
      type: Object,
      notify: true,
      value: function() {
          return {};
      }
    }
  },

  editData: function( newData ) {
    this.set( 'data.name', newData.name  );
  },
});

:

<template>
  <t-child data={{data}}></t-child>
</template>

<script>
  Polymer({
    is: 't-parent',

    properties: {
      data: Object
    },

    observers: [
      'nameChange(data.name)'
    ],

    nameChange: function( newName ) {
      console.log( 'Name has been changed to: ', newName )
    },
  });
</script>

, , data, , - .