在 Ember 中检测列表渲染完成的事件

Question

我有一个 Ember 应用程序，页面上显示了一长串项目。列表的内容是根据用户查询计算的。有时，新列表需要一两秒才能呈现。我正在尝试在此渲染过程中显示加载指示器，而我真正需要的是一个处理程序，用于处理包含列表的标记何时完成重新渲染。这可能吗？

<div id="listContainer">
{{#each item in theList}}
  ...
{{/each}}
</ul>

theList: function() {
  // return result of filtering baseList with the query
}.property('baseList', 'query')

actions: {
  someHandler: function() {
    // how can I catch when the #listContainer is finished rerendering?
  }
}

Answer 1

{{each}} 助手可以有一个{{else}} (guide) 子句，当集合没有任何要迭代的项目时可以使用该子句。您可以执行以下操作类似：

<div id="listContainer">
{{#each item in theList}}
   <!-- do something with item here -->
{{else}}
    Loading...
{{/each}}
</ul>

或

你可以在你的控制器中有一个属性作为“正在加载”的标志，像 这样：

[...]
theListIsLoading: false,
theList: function() {
  var query = this.get('query'),
      baseList = this.get('baseList'),
      filtered = [];

  this.set('theListIsLoading', true);
  filtered = baseList.filter(function(listItem) { /* your filter goes here */ });
  this.set('theListIsLoading', false);

  return filtered;
}.property('baseList', 'query'),
[...]

模板类似于

<div id="listContainer">
{{#each item in theList}}
   <!-- do something with item here -->
{{else}}
    {{#if theListIsLoading}}
        Loading...
    {{else}}
        No records to display
    {{/if}}
{{/each}}
</ul>