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值并每次都进行更改，因为我在:host[active] ...等CSS样式中使用它。

我怎样才能实现它？我在事件处理程序中尝试了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

尝试包括“活跃”＆＃39;作为my-element中的属性，并将reflectToAttribute设置为true。

automapper

编辑：请详细说明如何更改路径，以便通知观察者。您需要更新data.active，如下所示

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

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

从Polymer对象属性值设置属性

1 个答案: