如何在观测器函数中访问聚合物特性

How to access polymer properties in observer function

本文关键字：访问 聚合物 函数 观测器      更新时间：2023-09-26

当我试图将"progressbar.js"包装在聚合物元素中时，我无法访问circlepop。

var startColor = '#FC5B3F';
var endColor = '#6FD57F';
Polymer({
  is: "home-view",
  properties: {
    value: {
      type: String,
      observer: '_valueChanged'
    },
    circleProp: {
      type: Object,
      notify: true,
     reflectToAttribute: true
    }
  },
  ready: function() {
    var element = this.$$('#circleValue');
    this.circleProp = new ProgressBar.Circle(element, {
      color: startColor,
      trailColor: '#eee',
      trailWidth: 1,
      duration: 2000,
      easing: 'easeInOut',
      strokeWidth: 5,
      text: {
          value: '0'
      },
      // Set default step function for all animate calls
      step: function(state, circle) {
          circle.path.setAttribute('stroke', state.color);
          circle.setText((circle.value() * 100).toFixed(0));
      }
  });
  this.circleProp.animate(0.3, {
      from: {color: startColor},
      to: {color: endColor}
  });
},
attach : function() {
  if (this.circleProp) {
      this.circleProp.animate(this.value, {
          from: {color: startColor},
          to: {color: endColor}
      });
  }
},
_valueChanged : function(oldValue, newValue) {
  if (this.circleProp) {
    this.circleProp.animate(newValue, {
        from: {color: startColor},
        to: {color: endColor}
    });
  }
}
});

如何访问circleProp以便制作动画。或者如何访问_valueChanged中的对象？只能访问此元素的DOM。

我认为您的问题是circleProp属性上的reflectToAttribute。你为什么这么做？Polymer正试图将其序列化为dom中元素的属性。

否则访问this.circleProp将工作

_valueChanged在准备好之前被明确调用。尝试一个复杂的观察器

observers: ['_valueCahnged(value)']

这将防止观测值未定义。写入属性时也使用

this.set('circleProp', newValue)

否则，Polymer不会注意到发生了变化。在_valueCahnged观察器中，您可以通过此访问所有属性

相关文章：