Polymer 高分子元素数据绑定

我试图创建一个带有时钟、简单圆圈和CSS动画处理程序的聚合元素，因此我需要更新元素模板中的样式转换：旋转。我用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
  });

 })();

//HTML代码
... // 脚本被记录下来
//javascript代码
（功能（）{
时、分、秒；
//用于更新时钟的功能
函数updatelock（）{
var now=力矩（）；
秒=现在。秒（）*6，
分钟=现在。分钟（）*6+秒/60，
小时=（（现在的.hours（）%12）/12）*360+90+分钟/12；
console.log（第二个）；
}
//设置超时以每1000毫秒更新一次时钟
函数timedUpdate（）{
updatelock（）；
setTimeout（timedUpdate，1000）；
}
//ok timedUpdate
timedUpdate（）；
聚合物({
//在这里定义元素原型
getHourDegree:函数（）{
返回时间+度；
},
getMinuteDegree:函数（）{
返回分钟数+度；
},
getSecondDegree:函数（）{
返回秒+度；
},
霍尔德格：这个小时，
秒：这是秒
});
})();

---

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

您需要更新元素上的属性以触发重新渲染。元素不监视对

小时、分钟、秒的更改，因此在更新这些值时不会重新渲染自身

下面是一个例子，它将实现您想要实现的目标

  <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 3的时钟元件：


从导入{polymerement，html}https://unpkg.com/@聚合物/聚合物/聚合物元素.js？模块'
类MyClock扩展了关联{
静态获取属性（）{
返回{
小时数：，
分钟：号码，
第二：数字
}
}
就绪（）{
super.ready（）
this.updatelock（）
}
UpdateLock（）{
let now=新日期（）
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.updateLock（），1000）
}
静态获取模板（）{
返回html`
`
}
}
自定义元素。定义（'my-clock'，MyClock）

此示例在Chrome和Firefox中不使用polyfills，您可以在中尝试。
谢谢，非常干净！！完美的解决方案！
  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;
    },

  });