~ read.
Ember.js - Updating a view on controller data change

Ember.js - Updating a view on controller data change

I often find myself needing to update my Ember Views after a promise has been fulfilled or after some data has changed. I've come up against this problem and solved and re-solved it so many times, that I've decided to post my favorite (and most recent) solution.

In this case, I've got a StopsIndexRoute, StopsIndexController, and StopsIndexView. I need to prepend some tbody elements with a label based on an object called items on my controller. items is initially populated by Ember Data and then possibly manipulated. Here's how I do it.

App.StopsIndexView = Ember.View.extend

  watchItems: (->
    self = this

    Ember.run.scheduleOnce 'afterRender', ->
      controller = self.get 'controller'
      items = controller.get 'items'

      tbodyElems = $('#myTable tbody')

      tbodyElems.each (idx) ->
        $(@).before('<h5>' + items.content[idx].get('name') + '</h5>')

      $('#dailyView h5').css 'padding-left', '5px'

  ).observes('controller.items')

You can observe any property you want on controller here, so if you'd like to directly observe model, you could do that too.

comments powered by Disqus