Question

当我尝试在聚合物元素中包装'progressbar.js'时，我无法访问circleprop。

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。

Answer 1

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

访问this.circleProp否则将起作用

Answer 2

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

observers: ['_valueCahnged(value)']

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

this.set('circleProp', newValue)

否则Polymer不会注意到有变化。在_valueCahnged观察者中，您可以通过此

访问所有属性

如何在观察者函数中访问聚合物属性

2 个答案: