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>

OR

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

[...]
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>

用于检测Ember中列表的完成呈现的事件

1 个答案: