Question

我尝试使用时钟，简单的圆圈和CSS中带动画的处理程序创建一个Polymer元素，因此我需要更新元素模板中的样式转换：旋转。我测试AngularJs中的代码并且它运行良好，但是在Polymer中我不能每秒更新CSS属性，只有在元素是instatiate时才设置该值，并且我似乎使用了错误的方法将数据绑定到var hourDeg，minuteDeg， secondDeg与时钟的处理程序的度数，这里是代码：

// 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

您需要更新元素上的属性以触发重新渲染。该元素不会监视hour, minute, second的更改，因此在更新这些值时它不会重新呈现。

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

  <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;
    },

  });

Answer 2

这是更新为Polymer 3的时钟元素。

<html>
<body>
<script type="module">
  import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module'

  class MyClock extends PolymerElement {

    static get properties () {
      return {
        hour: Number,
        minute: Number,
        second: Number
      }
    }

    ready () {
      super.ready()
      this.updateClock()
    }

    updateClock () {
      let now = new Date()
      this.second = now.getSeconds() * 6
      this.minute = now.getMinutes() * 6 + this.second / 60
      this.hour = ((now.getHours() % 12) / 12) * 360 + 90 + this.minute / 12
      setTimeout(() => this.updateClock(), 1000)
    }

    static get template () {
      return html`
        <link rel="stylesheet" href="my-clock.css">
        <div id="hour" class="hero-hour" style="transform: rotate([[hour + 'deg']]);"></div>
        <div id="minute" class="hero-minute" style="transform: rotate([[minute + 'deg']]);"></div>
        <div id="second" class="hero-second" style="transform: rotate([[second + 'deg']]);"></div>
      `
    }
  }

  customElements.define('my-clock', MyClock)
</script>

<my-clock></my-clock>
</body>
</html>

此示例在Chrome和Firefox中无需使用polyfills即可运行，您可以在CodePen中尝试使用。

聚合物元素数据绑定

2 个答案: