ember.js - Live update with Server Sent Events (SSE), ember-data, and Rails 4 backend -

i got live updates working ember , rails 4 of railscast #401. actioncontroller::live on backend , eventsource in ember code.

the event listener prepends div content sent server, there 2 problems:

1. the template on local browser updates automatically, causing 2 duplicate records display. tried create temporary client id , compare ids before prepending dom. proved quite glitchy, plus doesn't seem ember way...

2. i found ember store 'push' , 'pushpayload' methods couldn't update template either.

here relevant code:

method 1 using dom prepend -

auth.notebookindexroute = ember.route.extend(  model: ->     @modelfor('notebook').get('notes')  activate: ->     self = @     source = new eventsource('/api/v1/testposts')     source.addeventlistener 'message', (e) ->         data = $.parsejson(e.data)          unless self.controllerfor('postsnew').get('savedid') data.id             $("#allposts").prepend $("<div class=\"post\">").text(data.content) 

'savedid' set in posts.new controller after post saved. hit or miss...

method 2 using store.push -

auth.notebookindexroute = ember.route.extend(  model: ->     @modelfor('notebook').get('notes')  activate: ->     self = @     source = new eventsource('/api/v1/testposts')     source.addeventlistener 'message', (e) ->         data = $.parsejson(e.data)         self.store.push "post",             id: data.id             content: data.content 

the push method not update template.

method 3 - works some of time

auth.notebookindexroute = ember.route.extend(  model: ->     @modelfor('notebook').get('notes')  activate: ->     self = @     source = new eventsource('/api/v1/testposts')     source.addeventlistener 'message', (e) ->         data = $.parsejson(e.data)          self.store.find("post", data.id).then (stuff) ->             console.log('push new post')             posts = self.modelfor('notebook').get('posts')             posts.addobject(stuff) 

when open chrome , firefox browser side side , add new posts, they'll show 60-70% of time...still looking error might be.

thanks in advance can get.

using ember-data, adding object sent server, application able sync server , update template. seems clean , works consistently...but in chrome, not in firefox.

i'm adding answer because it's step forward question, not correct answer yet. hoping find soon.

auth.notebookindexroute = ember.route.extend(      activate: ->         self = @         source = new eventsource('/api/v1/testposts')         source.onmessage = (e) ->             console.log('this shows in chrome not in firefox')             data = $.parsejson(e.data)             self.store.find("post", data.id).then (stuff) ->                 posts = self.modelfor('notebook').get('posts')                 posts.addobject(stuff)                 stuff.save()