在Ember js中操纵来自AJAX调用的数据

时间:2015-03-16 22:31:01

标签: ajax ember.js ember-data

我是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

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

1 个答案:

答案 0 :(得分:2)

您的问题是您的同步代码没有返回任何内容。您的model函数返回App.Test.findAll(),这绝不是任何事情。你需要回复一个承诺。

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);
      }
    });
  });
}