promise - 在 model.list 加载期间显示加载器消息的最佳方式

Question

我使用 can.Model.List 为用户列表创建了一个带有 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

您可以使用list Promise 插件在解析 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>