Emberjs display data after promise gets fulfilled?

Question

I am a bit conceptually confused about how this works.

The user enters data on the form, presses next. The controller 's nextStep action fires and I ask the model to get data from the server. When the data arrives, I transition to the results route. At that point, I have the route store the previous model on a variable on the controller. Then I want to iterate through the data on the template.

The problem is that nothing shows up.

This is what I have (in the appropriate files):

//Step 1 Controller (partial - nextStep action)
var businessmatch = this.store.find('businessmatch', {businessname: businessname, phonenumber: phonenumber, zipcode: zipcode})
    .then(function (result) {
         // The model has data at this point
         controller.transitionToRoute('step2');
    });


// step2 Router
import Ember from 'ember';

export default Ember.Route.extend({
    setupController: function(controller, model) {
        controller.set('businessmatches', this.store.find('businessmatch'));
    }
});

// Step2 template (partial)
        {{#each businessmatches}}
            {{businessname}}
        {{/each}}

// Model
import DS from 'ember-data';

var Businessmatch = DS.Model.extend({
    businessname: DS.attr('string'),
    phonenumber: DS.attr('string'),
    address: DS.attr('string'),
    pageurl: DS.attr('string'),
    thubmurl: DS.attr('string')
});

export default Businessmatch;

// Sample response from server
{
   "businessmatches":[
      {
         "businessname":"El Farolito",
         "pageurl":"/biz/el-farolito-san-francisco-2",
         "thumburl":"/bphoto/ohpxQWg-hB9Sb27HkVg-yQ/90s.jpg",
         "address":"780 El Camino RealMillbrae, CA 94030",
         "phonenumber":"(650) 583-0487",
         "id":1
      },
      {
         "businessname":"El Farolito",
         "pageurl":"/biz/el-farolito-san-francisco-4",
         "thumburl":"/photo/AW76YTovuu9YsO69_BcLKQ/30s.jpg",
         "address":"2779 Mission StSan Francisco, CA 94110",
         "phonenumber":"(415) 824-7877",
         "id":2
      },
      {
         "businessname":"El Farolito",
         "pageurl":"/biz/el-farolito-san-francisco",
         "thumburl":"/bphoto/LgTOTIicRY6XArigmPhBpw/90s.jpg",
         "address":"2950 24th StSan Francisco, CA 94110",
         "phonenumber":"(415) 641-0758",
         "id":3
      }
   ]
}

Answer 1

Found it, if I change

controller.set('businessmatches', this.store.find('businessmatch'));

to

controller.set('businessmatches', this.store.all('businessmatch')); it works as expected.

Would be interested to know why though, if anyone can explain.

Answer 2

@tstirrat is correct, the store.all() method immediately returns an array of cached records , while the store.find() method returns a promise of fetched records .

Is there a specific reason you aren't using the model hooks in your route? They are promise aware, and will wait for your store.find() to resolve then pass the model on to your setupController. You can then reference the previous models with modelFor('step1') or just use store.all() again.