Ember -retrieving data from server to a view?

Question

Here you can find an example to work on, of what i think you are asking

http://emberjs.jsbin.com/iPeHuNA/1/edit

js

Tried to separate the entities related to the model of the app, from how they will be displayed.Created an ember class App.Person that will hold the data from server. I have not used ember-data, but it is quite easy to replace the classes with ember-data notation and the dummy ajax calls with respective store calls etc, if desired.

App = Ember.Application.create();

App.Router.map(function() {
  this.route("persons");
});

App.IndexRoute = Ember.Route.extend({
  beforeModel: function() {
    this.transitionTo("persons");
  }
});

App.PersonsRoute = Ember.Route.extend({
  model:function(){
    return $.ajax({url:"/"}).then(function(){/*in url it is required to place the actual server address that will return data e.g. from a rest web service*/
      /*let's imagine that the following data has been returned from the server*/
      /*i.e. two Person entities have already been stored to the server and now are retrieved to display*/

      var personsData = [];
      var person1 = App.Person.create({id:1,fname:"Person1",lname:"First",genderId:2});
      var person2 = App.Person.create({id:2,fname:"Person2",lname:"Second",genderId:1});
      personsData.pushObject(person1);
      personsData.pushObject(person2);

      return personsData;
    });
  },
  setupController:function(controller,model){


   /*this could also be retrieved from server*/
    /*let's mimic a call*/
    $.ajax({url:"/",success:function(){

      /*This will run async but ember's binding will preper everything.If this is not acceptable, then initialization of lists' values/dictionary values can take place in any earlier phase of the app.  */

      var gendersData = [];
      gendersData.pushObject(App.Gender.create({id:1,type:"male"}));
    gendersData.pushObject(App.Gender.create({id:2,type:"female"}));

    controller.set("genders",gendersData);

    model.forEach(function(person){

      person.set("gender",gendersData.findBy("id",person.get("genderId")));


    });
    }});

    controller.set("model",model);
  }
});

App.PersonsController = Ember.ArrayController.extend({
  genders:[],
  actions:{
    addPerson:function(){
      this.get("model").pushObject(App.Person.create({id:Date.now(),fname:"",lname:""}));
    },
    print:function(){
      console.log(this.get("model"));
    }
  }
});

App.PersonFormView = Ember.View.extend({
  templateName:"personForm",
  /*layoutName:"simple-row"*/
  layoutName:"collapsible-row"
});

App.Person = Ember.Object.extend({
  id:null,                                
  fname:"",
  lname:"",
  gender:null
});

App.Gender = Ember.Object.extend({
  id:null,
  type:null
});

html/hbs

created a view that takes care of how each App.Person instance gets rendered. As example partial and layouts have been used to accomodate bootstrap styling, as i noticed you used some in your example.

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Ember Starter Kit</title>
      <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    </head>
    <body>

      <script type="text/x-handlebars">
        <h2>Welcome to Ember.js</h2>

        {{outlet}}
      </script>

      <script type="text/x-handlebars" data-template-name="persons">
        {{#each person in this}}

        {{view App.PersonFormView}}

        {{/each}}
        <br/><br/>
        {{partial "buttons"}}
      </script>

      <script type="text/x-handlebars" data-template-name="_buttons">
        <button type="button" class="btn btn-primary" {{action "addPerson"}}>
      add
    </button>
    <button type="button" class="btn btn-primary" {{action "print"}}>
      print results to console
    </button>

      </script>

      <script type="text/x-handlebars" data-template-name="personForm">
      <div class="row">
      <div class="col-md-6 col-xs-5">
      <div class="form-group">
        <label>First Name</label>
        {{input class="form-control" placeholder="First Name" value=person.fname}}
        </div>
      </div>

      <div class="col-md-6 col-xs-5">
        <div class="form-group">
        <label>Last Name</label>
        {{input class="form-control" placeholder="Last Name" value=person.lname}}
        </div>
      </div>
      </div>
     <div class="row">
      <div class="col-md-2 col-xs-4">
      {{
               view Ember.Select
               prompt="Gender"
               content=controller.genders
               optionValuePath="content.id"
               optionLabelPath="content.type"
               selectionBinding=person.gender
               class="form-control"
            }}
      </div>
      </div>
      <!--</div>-->

      </script>

      <script type="text/x-handlebars" data-template-name="simple-row">
      <div class="row">
      {{yield}}
      </div>
      <br/><br/>
      </script>

      <script type="text/x-handlebars" data-template-name="collapsible-row">
        <div class="panel-group" >
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href=#{{unbound person.id}}>
              person:{{person.fname}}
            </a>
          </h4>
        </div>
        <div id={{unbound person.id}} class="panel-collapse collapse">
          <div class="panel-body">
            {{yield}}
          </div>
        </div>
      </div>
      </div>
      </br>
      </script>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
      <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
      <script src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script>

    </body>
    </html>