在Ember.js中，为什么'afterRender'不会触发重绘？

Question

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

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>
    {{#each model as |client|}}
      <tr>
        <td>{{client.primaryUser.name}}</td>
        <td>{{client.primaryUser.email}}</td>
        <td>{{client.createdAt}}</td>
      </tr>

    {{/each}}
  </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 :

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.

I can confirm at this point that the other primary user fields are not in the DOM:

Help

Is there a way to trigger an event once all objects have been rendered? I've using Ember.run.sync() as mentioned in this answer , but it didn't help.

Answer 1

Everything's fine but you need to manually check if all users are rendered. There's no other option. The code would look like this I think. It's a bit primitive, but I think you get the idea that you just can check the DOM.

modelObserver: function() {
    var areRendered = [];
    Ember.$('table#admin-table tr').each(function (index, element) {
        $(element).find('td').each(function (anotherIndex, anotherElement) {
            if (anotherIndex <= 1) { //This is because according to your screenshot you don't have to check all the cells, just first two if I'm not mistaking.
                if (anotherElement.text()) {
                    areRendered.push(true);
                } else {
                    areRendered.push(false);
                }
            }
        });
    });
    if (!areRendered.contains(false)) { //Checking if there were any element without data.
        Ember.run.next(this, this.updateTable);
    }
}.observes('model.@each.primaryUser')

Hope it helps!