从 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 设置为 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

尝试将 'active' 作为属性包含在您的 my-element 中，并将 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

从 Polymer 对象设置属性属性值

Set attribute from Polymer object property value

polymer

polymer-1.0

从 Polymer 对象设置属性 属性 值

Set attribute from Polymer object property value

polymer

polymer-1.0

从 Polymer 对象设置属性属性值