Set attribute from Polymer object property value

Question

I have element and I put in it object with data for it.

<my-element data="{{item.content}}"></my-element>

For now I have not done this so I have all in data property declaration.

properties: {
  data: {
    type: Object,
    value: {
      active: false,
      name: "Some name."
      ...
   }
  }
}

I also have to click handler on child element which should toggle the boolean value.

_handleClickBlock: function () {
  this.data.active = !this.data.active;
}

I need to set [active] attribute on my-element to data.active value and make changes every time, because I use it in my CSS styles like :host[active] ....

How can I achieve it? I tried this.setAttribute('active', this.data.active) in event handler, but it change the value only once; console log was toggling.

Edit:

I have tried use this code:

observers: [
    '_activeChange(data.active)'
],

_activeChange: function(newValue) {
    this.active = newValue;
    console.log("change");
},

_handleClickBlock: function () {
    console.log("------ click");
    this.data.active = !this.data.active;
    console.log(this.data.active);
}

But in my console output is only this, so observer is not called.

------ click
false
------ click
true

Answer 1

Try including 'active' as a property in you my-element and set reflectToAttribute to true.

properties: {
  data:{...}
  active: {
    type: Boolean,
    reflectToAttribute: true
  }
}
observers: [
  '_activeChange(data.active)'
],
_activeChange: function(newValue) {
  this.active = newValue;
}

Edit: Please go through how to change the path such that observers are notified. You need to update data.active as below

this.set('data.active', !this.data.active);

Below jsbin: http://jsbin.com/qupoja/4/edit?html,output