聚合物元素数据绑定答案

【问题标题】：Polymer Element Data Binding聚合物元素数据绑定
【发布时间】：2015-01-06 16:44:20
【问题描述】：

我正在尝试用 CSS 中的时钟、简单的圆圈和带有动画的处理程序创建一个 Polymer 元素，所以我需要更新元素模板中的 style transform: rotate。我在 AngularJs 中测试了代码，它运行良好，但是在 Polymer 中我不能每秒更新 CSS 属性，只有当元素处于非状态时才设置该值，并且似乎我使用错误的方法来绑定 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 毫秒更新一次值！

【问题讨论】：

标签： polymer

【解决方案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;
    },

  });

【讨论】：

谢谢，很干净！！完美的解决方案！

【解决方案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 中无需 polyfill 即可工作，您可以在 CodePen 中尝试。

【讨论】：