폴리머 요소 데이터 바인딩

Question

시계, 단순 원 및 CSS로 애니메이션 처리기가있는 폴리머 요소를 만들려고하므로 스타일 변환을 업데이트해야합니다. 요소 템플릿에서을 회전하십시오. 내가 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 MS를 업데이트 할 수 없습니다!

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

    });