vendredi 9 septembre 2016

In Ember.js why does 'afterRender' not trigger on a redraw?

I'm trying to call a function when new data gets added to a table in a view, but it's not working.

I have two models, client and user. A client has many users.

My view to list clients looks like this:

<table class="table table-striped" id="admin-table">
  <thead>
    <tr>
      <th>Primary User</th>
      <th>User Email</th>
      <th>Join Date</th>
    </tr>
  </thead>
  <tbody>
    
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>

    
  </tbody>
</table>

primaryUser is a computed property containing the first user for each client.

  primaryUser: Ember.computed('users', function(){
    return this.get('users.firstObject');
  })

Problem

I'm using the jquery tablesorter library which adds sorting and filtering to the table. Because the primaryUser get's loaded by AJAX I need to call $('#admin-table').trigger('update') when new data is added in order to have the library index the new information.

Here's what I'm doing:

  modelObserver: function() {
    Ember.run.next(this, this.updateTable);
  }.observes('model.@each.primaryUser')

I've tried both run.next, and run.scheduleOnce('afterRender'..) and the result is always the same. The updateTable function triggers before all of the primaryUser objects are rendered.

Here's what happens if I put a debugger within this.updateTable:

enter image description here

it only triggers once, when a cached user (me) is rendered. The empty cells in this table populate a few ms later when the rest of the user information is ajaxed in, but updateTable never re-runs.

Help

Is there a way to trigger an event once all objects have been rendered?




Aucun commentaire:

Enregistrer un commentaire