Polymer: Creating a countdown clock

Question

I am attempting to build a polymer countdown widget.

In Javascript I would write a similar function to this and keep inserting the updated countdown time into the required ID element.

 setInterval(function () {
   //Work out time till event horizon
   //Shove the new time into the associated element
   countdown.innerHTML = days + "d, " + hours + "h, "+ minutes + "m, " + seconds + "s";
 }, 1000); 

In Polymer I am uncertain how to go about this as I am unsure how to go about using setInterval in Polymer... Here is some sudo code:

                <polymer-element name="countdown-element">
                <template>
                      <div id="countDown">{{counter}}</div> 
                </template>
                <script>
                    Polymer('countdown-element', {
                        counter: function() {
                              //Do stuff
                        }
                    });

                </script>
            </polymer-element>

How do I go about repeatedly sending the count down time to the counter ID location?

Answer 1

I think what you want is a combination of the two-way data binding that comes with Polymer and the async method described in the "advanced topics" here: http://www.polymer-project.org/docs/polymer/polymer.html#additional-utilities

Here is a JSBin with a simple countdown.