Set attribute from Polymer object property value - polymer

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