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

我需要[active] attribute在 my-element 上设置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