Ember getJSON.done() vs .then()

Question

I am working with Ember and the following code gets the JSON from the api.php script and displays the results on the template. My question is on why the script breaks when I change the getJSON function to use .done() instead of .then()? I get the following error:

:Uncaught Error: assertion failed: an Ember.CollectionView's content must implement Ember.Array. You passed [object Object] .

If I log the response.items object during the function, I get the same results in the console, so I am curious how Ember is interpreting this differently.

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Item.all();
  }
});

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

App.Item.reopenClass({
  all: function() {
      return $.getJSON("api.php").then(function(response) {
        var items = [];

        response.items.forEach( function (item) {
          items.push( App.Item.create(item) );
        });
        return items;
      });
  }
});

Answer 1

Not sure if this will help or not, but in my Ember App, I used the following to grab some JSON:

APP.getJSON = function(url) {
  return new Ember.RSVP.Promise(function(resolve, reject){
    var xhr = new XMLHttpRequest();

    xhr.open('GET', url);
    xhr.onreadystatechange = handler;
    xhr.responseType = 'json';
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.send();

    function handler() {

        if (this.readyState === this.DONE) {
            if (this.status === 200) {
                typeof(this.response) === "string" ? resolve(JSON.parse(this.response)) : resolve(this.response);
            } else {
                reject(new Error("getJSON: [" + url + "] failed with status: [" + this.status + "]"));
            }
        }
    };
  });
}