从 Polymer 对象属性值设置属性

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

我需要将 my-element 上的 [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