Ember JS - view insertion event

Question

I have the following Handlebars template which contains some views that are being output in an #each.

<script type="text/x-handlebars" data-template-name="thread">
  {{#view My.ContainerView}}
      {{#each message in messages}}
          {{view My.MessageView contentBinding="message"}}
      {{/each}}
  {{/view}}
</script>

I am using the didInsertElement event to catch the insertion of the parent view.

I know there is didInsertElement fired on insertion of each My.MessageView but what I was wondering was if there was an event fired when all of the My.MessageViews were inserted? Meaning the #each is finished. Maybe there is a similar event for a view being fully rendered?

// Ember Noobie

nrion nrion · Accepted Answer · 2013-03-14T18:27:53

I've run into a similar scenario, in regards to where to fire a jquery event after child views have rendered. With some help from this forum, I ended up with something like this:

The view below is rendered once for each item that I ajax in (for a bootstrap accordion).

App.AccItemView = Em.View.extend
  classNames: ['accordion-group']
  templateName: 'acc_item'
  didInsertElement: ->
    Ember.run.next this, ->
      @.$('.collapse').collapse({parent:"#accordion2"})

There's also an afterRender hook, which I'm still experimenting with myself.

didInsertElement: ->
    Ember.run.scheduleOnce 'afterRender', this, () ->
      @.$('.collapse').collapse({ parent:'#accordion2'})

A fiddle is here, if it is of any use. http://jsfiddle.net/nrionfx/s59fA/16/

Ember JS - view insertion event

1 Answers