How to use {{#each}} helper in ember 2.0?

Question

I am new to ember. I want to create a dropdown for the countries array using ember. I have tried the following:

App.SignupRoute = Ember.Route.extend({
model: function () {
    countries: { };
    var self = this;
    $.ajax({
        url: "View/countries.json",
        type: "GET",
        async: false,
        success: function (data) {
            self.set("countries",JSON.parse(data));
        }
    });
 }
});

  <select>
     {{#each model as |countries|}}
          <option value={{countries.code}}>{{countries.name}}</option>           
     {{/each}}
  </select>

Could you help me solve this?

Answer 1

You are not returning anything from the model hook.

Try using this approach instead.

model: function () {

    var country_promise  = $.ajax({
         url: "View/countries.json",
         type: "GET"
    });

    return Ember.RSVP.hash({
       countries: country_promise
    })
});

hbs

      <select>
         {{#each model.countries as |country|}}
              <option value={{country.code}}>{{country.name}}</option>           
         {{/each}}
      </select>