Question

在Railscast＃401的帮助下，我获得了使用ember和Rails 4的实时更新。 ActionController ::在我的Ember代码中生活在后端和EventSource上。

事件监听器在服务器发送的内容前面加上一个div，但有两个问题：

我本地浏览器上的模板会自动更新，导致显示2条重复记录。所以我尝试创建一个临时客户端ID，并在前置DOM之前比较id。这被证明是非常微不足道的，加上它看起来不像是蠢货......
我发现了ember商店'push'和'pushPayload'方法，但我无法更新我的模板。

以下是相关代码：

方法1使用DOM前置 -

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') is data.id
            $("#allposts").prepend $("<div class=\"post\">").text(data.content)

'savedId'。这是命中还是错过......

方法2使用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

push方法不会更新模板。

方法3 - 正常工作某些

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)

当我并排打开Chrome浏览器和Firefox浏览器并添加新帖子时，他们只会显示大约60-70％的时间...仍在寻找我的错误可能位置。

提前感谢您提供的任何帮助。

Answer 1

使用Ember-Data，通过添加服务器发送的对象，应用程序可以同步到服务器并更新模板。这似乎很干净，而且工作一致......但仅限于Chrome，而不是Firefox。

我正在添加它作为答案，因为这是这个问题的一个进步，但它还不是正确的答案。希望尽快找到答案。

Auth.NotebookIndexRoute = Ember.Route.extend(

    activate: ->
        self = @
        source = new EventSource('/api/v1/testposts')
        source.onmessage = (e) ->
            console.log('This shows up in Chrome but 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()

使用服务器发送事件（SSE），ember-data和Rails 4后端进行实时更新

1 个答案: