Question

我有一个ajax请求，返回大约1300个json对象。在这些对象中，我填充了一些ArrayProxies和视图。每个ArrayProxy和因此视图包含大约15个对象和有关这些对象的详细信息。

由于这里有一些逻辑，我需要大约5秒才能加载所有数据。

现在我需要知道如何制作类似于加载栏的内容，或者至少分别渲染每个视图。

我的ajax加载代码很简单：

$.getJSON('http://json.url, function(data) {
    $.each(data, function(i, obj) {
        var obj = App.ObjModel.create(obj);
        if (obj.get('isCalculable')) {
            App.ObjController.addObj(obj);
        }
    });
});

但是，如何判断应用程序在某些条件返回true后呈现视图？

感谢您的帮助，迪马

Answer 1

让Ember完成工作以确定何时加载数据。检查视图是否加载了数据，如果没有加载，则显示GIF动画或其他内容。这将告诉用户数据尚未准备好。

您可以在视图中执行以下操作：

{{#if controller.isLoaded}}
  Display controller.content in loop or something
{{else}}
  <img src="/spinner.gif"> Loading data...
{{/if}}

此代码示例改编自官方Ember网站。你可以在最后找到它here。

Answer 2

您可以在div或其他内容中使用加载图像，并在请求的开始和结束期间切换其显示。

Ajax请求开始：

document.getElementById("LoadingImage").style.display="block";

完成后：

document.getElementById("LoadingImage").style.display="none";

使用带加载条的AJAX加载大数据数组

2 个答案: