在 Ember js 中处理来自 AJAX 调用的数据

Question

我是 Ember js 的新手，我很难理解为什么这不起作用。本质上，我正在向服务器发送 GET 请求，它会给我一个数组。我想用那个数组显示它的内容。

app.js

App.TestRoute = Ember.Route.extend({
    model: function(){
        return App.Test.findAll();
    }
});

App.Test = Ember.Object.extend();

App.Test.reopenClass({

    findAll: function() {
        var dummyArray = [];
        $.ajax({
            type: 'GET',
            url: 'myurl',
            headers: {'myheader'},
            success: function(data){
                data.dummyArray.forEach(function (item){
                    dummyArray.push(App.Test.create(item));
                });
                return dummyArray;
            },
            error: function(request, textStatus, errorThrown){
                alert(errorThrown);
                console.log();
            }
        });
    }
});

当您访问测试页面时，应该触发操作并且应该将一个数组返回到可以抓取数据以填充页面的模型

在我的 HTML 我有这个：

script type="text/x-handlebars" id="test">
        <ul>
            {{#each item in model}}
                <li>{{item.ID}}</li>
            {{/each}}
        </ul>
        {{outlet}}
    </script>

在控制台中，当我记录返回的数据时，它看起来像这样：

Object {dummyArray: Array[4]}
    dummyArray: Array[4]
        0: Object
            ID: 1111
        1: Object
            ID: 1112
        2: Object
            ID: 1113
        3: Object
            ID: 1114

应用程序运行没有错误，但是当我导航到我的测试页面时，该页面没有填充任何数据。

Answer 1

您的问题是您的同步代码 return 什么也没有。您的 model 函数 returns App.Test.findAll() 从来都不是。你需要return一个承诺。

findAll: function () {
  var result = [];
  return new Ember.RSVP.Promise(function (resolve, reject) {
    Ember.$.ajax({
      type: 'GET',
      url: 'myurl',
      headers: { 'myheader' },
      success: function (data) {
        data.dummyArray.forEach(function (item) {
          result.push(App.Test.create(item));
        });
        resolve(result);
      },
      error: function (request, textStatus, error) {
        console.log(error);
        reject(error);
      }
    });
  });
}

在 Ember js 中处理来自 AJAX 调用的数据

Manipulating data from AJAX call in Ember js

ajax

ember.js

ember-data