ember.js - 用于加载数据和零结果的不同模板

Question

我想在检索数据时显示加载器文本，并在检索数据但结果为零时显示另一个文本。

这是我当前的模板：

<h3>Items</h3>
<ul>
  {{#each item in controllers.items}}
    <li>{{ title }}</li>
  {{else}}
    <li>No items found</li>
  {{/each}}
</ul>

但是现在 text:No items found在检索数据时也会显示。

Emberjs 是否可以使用类似于以下模板的内容？

<h3>Items</h3>
<ul>
  {{#each item in controllers.items}}
    <li>{{ title }}</li>
  {{else if loading}}
    <li>Loading....</li>
  {{else}}
    <li>No items found</li>
  {{/each}}
</ul>

Answer 1

不可能完全按照您的方式，但我这样做，我正在向我的控制器添加一个加载标志，以便我可以在模板中访问它：

<h3>Items</h3>
<ul>
  {{#if loading}} 
     I am loading your items!
  {{else}}
    {{#each item in controllers.items}}
      <li>{{ title }}</li>
    {{else}}
      <li>No items found</li>
    {{/each}}
  {{/if}}
</ul>

所以你的控制器可能看起来像这样使用超时方法来重置加载标志：

App.YourController = Ember.ArrayController({
  loading : false, // set this property, when you are loading new content into the controller
  resetLoadingObserver : function(){
     // this gets triggered on each modification to the array
     // we want to reset the loading property, once all new items have been added
     var that = this;
     $.doTimeout("resetLoadingFlag", 100, function(){
       that.set("loading", false)
     });
  }.observes("content.@each")
});