Refactor events into server singleton.

assets/js/components/app.js

@@ -6,13 +6,12 @@ can.Component.extend({
 
   scope: {
     queueSongs: new QueueSong.List(),
-    status: new Status
+    status: new can.Map()
   },
 
   events: {
     init: function(element, options) {
       Status.findOne({}, this.updateStatus.bind(this));
-      this.scope.attr('events', new Events(this.scope));
       this.fetch();
     },
 

assets/js/constructs/events.js

@@ -1,24 +0,0 @@
-var Events = can.Construct.extend({
-
-  init: function(scope) {
-    this.events = new EventSource('/api/stream')
-
-    self = this
-
-    this.events.onmessage = function(e) {
-      response = JSON.parse(e.data);
-      switch (response.type) {
-        case 'status':
-          scope.attr('status').attr(response.data);
-          break;
-        case 'queue':
-          scope.attr('queueSongs', response.data);
-          break;
-        case 'time':
-          scope.attr('status.time', response.data);
-          break;
-      }
-    }
-  },
-
-});

assets/js/helpers/server.js

@@ -0,0 +1,5 @@
+window.server = {
+
+  eventSource: new EventSource('/api/stream'),
+
+}

assets/js/models/queueSong.js

@@ -12,6 +12,17 @@ var QueueSong = can.Model.extend({
 
 QueueSong.List = can.List.extend({
 
+  init: function() {
+    server.eventSource.addEventListener('message', this.updateQueue.bind(this));
+  },
+
+  updateQueue: function(event) {
+    var response = JSON.parse(event.data);
+    if (response.type === 'queue') {
+      this.attr(response.data, true);
+    }
+  },
+
   updatePlaying: function(newSong) {
     this.each(function(item) {
       item.attr('playing', false);

assets/js/models/status.js

@@ -4,6 +4,22 @@ var Status = can.Model.extend({
 
 }, {
 
+  init: function() {
+    server.eventSource.addEventListener('message', this.updateStatus.bind(this));
+  },
+
+  updateStatus: function(event) {
+    var response = JSON.parse(event.data);
+      switch (response.type) {
+        case 'status':
+          this.attr(response.data);
+          break;
+        case 'time':
+          this.attr('time', response.data);
+          break;
+      }
+  },
+
   playing: function() {
     return this.attr('state') === 'play'
   },

assets/js/mpd-client.js

@@ -3,8 +3,8 @@
 //= require ./libs/can.ejs.js
 
 //= require ./routes.js
-//= require_tree ./models/
 //= require_tree ./helpers/
+//= require_tree ./models/
 //= require_tree ./controls/
 //= require_tree ./constructs/
 //= require_tree ./components/