從聚合物對象屬性值設置屬性

Question

我有元素，我把它放在它的數據對象。

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

現在我沒有這樣做，所以我都在data財產申報。

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

我也必須點擊應該切換布爾值的子元素的處理程序。

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

我需要我的元件上設置[active] attribute到data.active值和更改每一次，因爲我用它在我的CSS樣式像:host[active] ...。

我該如何實現它？我在事件處理程序中嘗試this.setAttribute('active', this.data.active)，但它只更改了一次值;控制檯日誌正在切換。

編輯：

我曾嘗試使用此代碼：

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); 
} 

但在我的控制檯輸出僅僅是這一點，所以觀察者不叫。

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

Answer 1

嘗試在您的my-element中包含'active'作爲屬性並將reflectToAttribute設置爲true。

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

編輯：請通過如何更改路徑，以便通知觀察員。您需要更新data.active如下

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

下面jsbin： http://jsbin.com/qupoja/4/edit?html,output