在model.list加载期间显示加载程序消息的最佳方式

Question

我使用can为用户列表创建了一个带有canjs的简单MVC应用程序。型号列表。由于我的请求可能需要5秒钟以上的时间，所以我会在加载过程中在视图中添加一个小的预加载消息/图像。

即，我想要这样的东西（我用的是胡子）

var users = new Users.List({});
element.html(can.view('myView', users);

使用此模板：

{{#if loading}}
   <p>Loading, please wait...</p>
{{else}}
   <ul>
      {{#each this}}
         <li>User {{ name }} {{ surname }}</li>
      {{/each}}
   </ul>
{{/if}}
</ul>

我可以通过使用一个新的可观察变量来解决问题，但我认为有一种更好的方法可以直接管理视图中的延迟数据。

有什么想法吗？

Answer 1

您可以使用列表承诺插件在解决Deferred时显示加载指示符：

var users = new Users.List();
users.replace(Users.findAll());
element.html(can.view('myView', { users: users });

这甚至允许您显示加载错误消息：

{{#if users.isPending}}
   <p>Loading, please wait...</p>
{{else}}
  {{#if users.isResolved}}
   <ul>
      {{#each users}}
         <li>User {{ name }} {{ surname }}</li>
      {{/each}}
   </ul>
   {{else}}
   There was an error loading the user list.
   {{/if}}
{{/if}}
</ul>