53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
/**
|
|
*
|
|
* 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;
|
|
}
|
|
}
|
|
});
|