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

Question

当新数据添加到 View 中的表中时，我尝试调用一个函数，但它不起作用。我正在使用 Ember.js 2.5

我有两个模型，客户端和用户。一个客户端有多个用户。

我列出客户的 View 如下所示:

<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 是一个计算属性，包含每个客户端的第一个用户。

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

问题

我正在使用 jquery tablesorter 库，它向表添加了排序和过滤功能。因为 PrimaryUser get 是通过 AJAX 加载的，所以我需要在添加新数据时调用 $('#admin-table').trigger('update') 以便让库索引新信息。

这就是我正在做的事情:

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

我尝试了 run.next 和 run.scheduleOnce('afterRender'..)，结果始终相同。 updateTable 函数在渲染所有primaryUser 对象之前触发。

如果我将调试器放入 this.updateTable 中，会发生以下情况:

它仅在渲染缓存的用户(我)时触发一次。当其余的用户信息通过 ajax 输入时，此表中的空单元格会在几毫秒后填充，但 updateTable 永远不会重新运行。

此时我可以确认其他主要用户字段不在 DOM 中:

帮助

有没有办法在渲染完所有对象后触发事件？我已经使用了 Ember.run.sync()，如 this answer 中所述。 ，但没有帮助。

Answer 1

一切都很好，但您需要手动检查是否所有用户都已呈现。没有其他选择。我认为代码看起来像这样。这有点原始，但我认为您已经了解只需检查 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')

希望对你有帮助!