polymer 元素数据绑定(bind)

Question

我尝试使用 CSS 中的动画创建一个带有时钟、简单圆圈和处理程序的 Polymer 元素，因此我需要更新元素模板中的样式转换:旋转。我在 AngularJs 中测试了代码，它运行良好，但在 Polymer 中，我无法每秒更新 CSS 属性，仅当元素 instatiate 时才设置该值，并且似乎我使用了错误的方法来数据绑定(bind) var hourDeg, 分钟Deg, secondaryDeg 带有时钟处理程序的度数，这里是代码:

// HTML code 
<link rel="import" href="../../bower_components/polymer/polymer.html">
<script src="../../bower_components/moment/moment.js"></script>

<polymer-element name="my-clock" attributes="">
  <template>
    <link rel="stylesheet" href="my-clock.css">

      <div id="hour" class="hero-hour" style="transform: rotate({{hourDeg + 'deg'}});">                       
      </div>
      <div id="minute" class="hero-minute" style="transform:rotate({{getMinuteDegree()}});"></div>
      <div id="second" class="hero-second" style="transform: rotate({{secondDeg + 'deg'}});"></div>

</template>

<script>
  ... // script reported down 
</script>
</polymer-element>

// javascript code 
(function () {

  var hour, minute, second;

  // function for update the Clock
  function updateClock(){
      var now = moment();

          second = now.seconds() * 6,
          minute = now.minutes() * 6 + second / 60,
          hour = ((now.hours() % 12) / 12) * 360 + 90 + minute / 12;
          console.log(second);
  }

  // setTimeout to update the Clock every 1000 ms
  function timedUpdate () {
      updateClock();
      setTimeout(timedUpdate, 1000);
  }

  // ok timedUpdate
  timedUpdate();

  Polymer({
    // define element prototype here
    getHourDegree: function(){
      return hour + 'deg';
    },
    getMinuteDegree: function(){
      return minute + 'deg';
    },
    getSecondDegree: function(){
      return second + 'deg';
    },
    hourDeg : this.hour,
    secondDeg : this.second
  });

 })();

所以我尝试不同的解决方案将值传递给 div 元素，但我无法每 1000 毫秒更新一次值!

Answer 1

您需要更新元素的属性才能触发重新渲染。该元素不会监视小时、分钟、秒的更改，因此当您更新这些值时它不会重新呈现自身。

这是一个可以实现您想要实现的目标的示例。

  <div id="hour" style="transform: rotate({{hour + 'deg'}});"></div>
  <div id="minute" style="transform: rotate({{minute + 'deg'}});"></div>
  <div id="second" style="transform: rotate({{second + 'deg'}});"></div>

...

  Polymer({
    hour : 0,
    minute : 0,
    second : 0

    domReady: function(){ 
      // start the clock when dom is ready
      setInterval(this.updateClock.bind(this), 1000);
    },

    updateClock: function(){
      var now = moment();
      // update properties to trigger re-render
      this.second = now.seconds() * 6,
      this.minute = now.minutes() * 6 + this.second / 60,
      this.hour = ((now.hours() % 12) / 12) * 360 + 90 + this.minute / 12;
    },

  });