Service property not updating consistently

Question

So this one may be a little involved. The full app, if you get really stumped and want to run it for yourself, is on github.

(If you do, you'll need to login, username and password is in API/tasks/populate.rake... just don't tell anyone else, k?)

I'm using Ember State Services to keep track of the isClean state of an editor component (which is using hallo.js).

Here's some sample code, with the scenario, and the problem I'm having with it:

When the content in the editor is changed, hallo.js fires a hallomodified event. In the component's didInsertElement hook, I'm attaching a jquery event listener, which sets the isClean property to false, and logs it to the console so we can check it's actually working:

JfEdit = Ember.Component.extend
  editorService: Ember.inject.service('jf-edit')
  editorState: Ember.computed('page', ->
    @editorService.stateFor(@page)         # page is passed in to the component 
                                           # in the route template
  ).readOnly()
  # ...
  didInsertElement: ->
    self = @
    @$().on("hallomodified", -> 
      console.log "modified"
      self.get('editorState.isClean') = false
      console.dir self.get('editorState') # -> Logs: Class -> __ember123456789:null, 
                                          #                   isClean: false 
                                          #    in the console (but I have to click on 
                                          #    isClean to show the value)
    ).hallo(
      # ...
    )

`export default JfEdit`
# Full code is at  https://github.com/clov3rly/JoyFarm/blob/master/app/app/components/jf-edit.em 
# (written in emberscript, which is an adaptation of coffeescript)

This seems to work, editorState.isClean = false in the console.

So then, when we attempt to transition away from the page, we check the editor state, in order to prompt the user to save.

NewPostRoute = Ember.Route.extend
  model: ->
    @*.store.createRecord 'post', 
      title: "New Post"
      content: "Content here."
  editorService: Ember.inject.service('jf-edit')
  editorState: Ember.computed('model', ->
    @editorService.stateFor(@model)
  ).readOnly().volatile()
  actions:
    willTransition: (transition) ->
      model = @modelFor('posts/new')
      console.log "editorState:", @get('editorState.isClean')
                                                        # -> logs true, after the log in 
                                                        #    the file above logged false.
      console.dir @get('editorState')                   # -> Logs: Class ->
                                                        #       __ember123456789:null
                                                        #    (the same number as above) 
                                                        #    but the isClean property is
                                                        #    not in the log statement
      # ... 

      unless @get('editorState.isClean')
        confirm("Do you want to discard your changes?") || transition.abort()

# Full code at https://github.com/clov3rly/JoyFarm/blob/master/app/app/routes/posts/new.em

So now, editorState.isClean is returning false (and not showing up when logging the object itself). However, the first property of the object has the same key, which I'm assuming is an ember ID of some sort?

The template looks like this:

{{{jf-edit page=model save="save" class="blog editor"}}}

So, page in the component/jf-edit file should be the same object as model in the routes/new file.

The service/state files are pretty simple, if you want to see them, you can find them in this gist (or in the repo itself).

Answer 1

Turns out this problem goes away if I store the editorState on the controller, and look up this.controller.editorState in the route willTransition action handler.

Thanks Grapho and locks on IRC ;)