There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.Close
Processing...
This may take a few seconds.

Clock with variable binding

This example uses variable data-binding to create a mobile-friendly interactive clock.

Data-binding is when you render (draw) a variable onto the page, and when the variable changes it automatically changes the rendered variable drawn on the page without any additional coding. This saves you having to update the variable manually.

Some use cases work with data binding, and some don't need it. It is a technique used by modern frameworks. Variable binding is useful when it makes something easier to do. But it can over-complicate things if used everywhere. Treat it as just another tool in your programming toolbox.

How do you data-bind a variable? You just put the variable in double-curlies when you render it, like {{variable name}}.

There are explanatory notes for this clock further down the page.

Interactive clock with variable binding

  • The draw event is a special Cause event that is triggered when an element is first drawn on the page.
  • trigger runs the specified "Tick" event on the same element. In this case "Tick" is a custom event that we have made up. You can also put conditionals (the Active CSS version of "if" statements) on events, and trigger always checks any conditionals to make sure that the event passes the conditions that are set before running actions. In this case we are just using the CSS selector "body:not(.clock3Off)" to check whether or not the "Tick" event should be run. CSS has its own built-in conditionals, like ":not()", etc. Active CSS conditionals use a similar syntax.

Same example but with explanatory comments:

#clock3:draw {    /* When the element is first drawn, run this */
trigger: Tick; /* Run the "Tick" custom event once. */
render: "Time {{clock3Time}}"; /* Draw the variable clock3Time. */
}

body:not(.clock3Off) #clock3:Tick { /* Custom tick event that runs when the class clock3Off is not in the body tag. */
var: clock3Time new Date().toLocaleTimeString() every 1s label clockTick; /* Set the clock3Time variable every second. */
}

#clock3:touchstart, #clock3:mousedown { /* Touch/click start event on the clock. */
add-class: .clock3Press; /* Add class .clock3Press to #clock3 element. This is for styling a "press". */
cancel-time: clockTick; /* Cancel any ticking that may be going on. */
prevent-default: true; /* Stop default browser click/touch behaviour (needed on mobile). */
}

#clock3:touchend, #clock3:mouseup { /* Touch/click end event on the clock. */
body { /* Apply the following actions to the body tag. */
toggle-class: .clock3Off; /* Toggle the setting of the clock3Off class in the body tag. */
}
remove-class: .clock3Press; /* Remove the clock3Press class as the touch/click has been released. */
prevent-default: true; /* Stop default browser click/touch behaviour (needed on mobile). */
trigger: Tick; /* Run the Tick event. If the clock3Off is not in the body, it will start the clock ticking. */
}