title: Live update with Server Sent Events (SSE), ember-data, and Rails 4 backend
body: <p>I got live updates working with ember and Rails 4 with the help of Railscast #401. ActionController::Live on the backend and EventSource in my Ember code.</p>
  
  <p>The event listener prepends a div with the content sent from the server, but there are 2 problems:</p>
  
  <ol>
  <li><p>The template on my local browser updates automatically, causing 2 duplicate records to display. So I tried to create a temporary client ID and compare ids before prepending to the DOM. This proved to be quite glitchy, plus it doesn't seem like the ember way...</p></li>
  <li><p>I found the ember store 'push' and 'pushPayload' methods but I couldn't get those to update my template either.</p></li>
  </ol>
  
  <p>Here is the relevant code:</p>
  
  <p><strong>Method 1 Using DOM prepend</strong> - </p>
  
  <pre><code>Auth.NotebookIndexRoute = Ember.Route.extend(
  
  model: -&gt;
      @modelFor('notebook').get('notes')
  
  activate: -&gt;
      self = @
      source = new EventSource('/api/v1/testposts')
      source.addEventListener 'message', (e) -&gt;
          data = $.parseJSON(e.data)
  
          unless self.controllerFor('postsNew').get('savedId') is data.id
              $("#allposts").prepend $("&lt;div class=\"post\"&gt;").text(data.content)
  </code></pre>
  
  <p>'savedId' is set in the Posts.new controller after a post is saved. This is hit or miss...</p>
  
  <p><strong>Method 2 Using store.push</strong> - </p>
  
  <pre><code>Auth.NotebookIndexRoute = Ember.Route.extend(
  
  model: -&gt;
      @modelFor('notebook').get('notes')
  
  activate: -&gt;
      self = @
      source = new EventSource('/api/v1/testposts')
      source.addEventListener 'message', (e) -&gt;
          data = $.parseJSON(e.data)
          self.store.push "post",
              id: data.id
              content: data.content
  </code></pre>
  
  <p>The push method does not update the template.</p>
  
  <p><strong>Method 3 - Works <em>SOME</em> of the time</strong></p>
  
  <pre><code>Auth.NotebookIndexRoute = Ember.Route.extend(
  
  model: -&gt;
      @modelFor('notebook').get('notes')
  
  activate: -&gt;
      self = @
      source = new EventSource('/api/v1/testposts')
      source.addEventListener 'message', (e) -&gt;
          data = $.parseJSON(e.data)
  
          self.store.find("post", data.id).then (stuff) -&gt;
              console.log('PUSH NEW POST')
              posts = self.modelFor('notebook').get('posts')
              posts.addObject(stuff)
  </code></pre>
  
  <p>When I open up a Chrome and Firefox browser side by side and add new posts, they'll show up only about 60-70% of the time...still looking for where my error might be.</p>
  
  <p>Thanks in advance for any help I can get.</p>