silvrgit/app/js/modules/clock.js

/**
 *
 * User: Martin Donnelly
 * Date: 2016-10-03
 * Time: 14:20
 *
 */
const ClockModel = Backbone.Model.extend({
  'initialize': function () {
    this.set('now', new Date);
    this.update();
  },
  'update': function () {
    const now = new Date;
    const mod = 60000 - (now.getTime() % 60000);
    this.set('now', now);

    const clockFn = function () {
      this.update();
    };

    setTimeout(clockFn.bind(this), mod + 10);
  }
});

const Clock = Backbone.View.extend({
  'tagName': 'div',
  'initialize': function () {
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
    this.$date = $('#date');
    this.$time = $('#time');
    this.render();
  },
  'render': function () {
    const now = this.model.get('now');
    // var curTime = now.format('<span class="hour">{24hr}</span>{mm}');
    const curTime = now.format('<span class="time">{24hr} {mm}</span>');

    const curDate = now.format('{yyyy}-{MM}-{dd}');
    if (this.prevTime !== curTime) {
      this.$time.html(curTime);
      this.prevTime = curTime;
    }

    if (this.prevDate !== curDate) {
      this.$date.html(now.format(
        '<span class="wd-{do}">{Weekday}</span> <span class="mo mo-{M}">{Month} {dd}</span> {yyyy}'));
      this.prevDate = curDate;
    }
  }
});