Ember.js Ajax call is not working as expected

Question

I am new to Ember.js framework.

I was trying to do a ajax call with from the Framework and not getting value as expected.

Below is the code in Page -

Link to first ajax call and it is working as expected.

{{#linkTo listemployee class="span3 btn btn-large btn-block"}}Employees{{/linkTo}}

Call data to populate the table -

App.ListemployeeRoute = Ember.Route.extend({
        setupController: function(controller) {
        $.getJSON('data/Tutorials.json', function(data) {
            controller.set('content',data);
        });
      }
    });

And the template for the data -

<script type="text/x-handlebars" data-template-name="listemployee">
  <h3 class="demo-panel-title">This is the list for Employee</h3>
  <table border=2>
    <tr><td><b>Name</b></td><td><b>Address</b> </td><td><b> Phone</b></td><td colspan=3>Action<td></tr>
    {{#each item in content}}
      <tr><td>{{item.name}}</td><td>{{item.address}} </td><td> {{item.phone}}</td><td> {{#linkTo viewemployee item.name}}View{{/linkTo}} </td><td>Edit</td><td>Delete</td></tr>
    {{/each}}
   </table>
</script>

The above is working as expected.

But when I clicked to

{{#linkTo viewemployee item.name}}View{{/linkTo}}

for above section -

My Controller code is in App.js -

App.Router.map(function() {
      this.route("listemployee", { path: "/employees" });
      this.resource("viewemployee", {
        path: "/employees/:name"
      });
    });

And my ViewemployeeRoute is

App.ViewemployeeRoute = Ember.Route.extend({
      model: function(params) {
        return {name: params.name};
      },
      setupController: function(controller, model) {
        $.getJSON('data/Tutorials.json', function(data) {
            data.forEach(function(item){
                if(item.name === model.name)
                {
                    var tabledata = '<table border = \"1\" ><tr><td>Name</td><td>'+item.name+'</td></tr><tr><td>Address</td><td>'+item.address+'</td></tr><tr><td>Phone</td><td>'+item.phone+'</td></tr></table>';
                    $('#employeetable').html(tabledata);
                    controller.set('content',item);
                }
            });
        });
      }
    });

and my template code is -

<script type="text/x-handlebars" data-template-name="viewemployee">
  <h3 class="demo-panel-title">This is the View Employee template</h3>
  <div id = "employeetable">

  </div>
</script>

The Problem -

The data for the employee is not coming when I am clicking on the View Link for first time.

But when I refresh the page, the data is coming as expected.

I think the problem is, when I click on the View link the response from ajax is coming later after page rendering.

So, what should I do in code, so that I have the Employee Related Details on clicking the View link?

Appreciate any help in this regard.

Thanks.

Update 2 after trying from the answer. But still the same result is coming.

I have changed My app.js as follows -

App.ListemployeeRoute = Ember.Route.extend({  
        model: function() {
            return App.Employee.findAll();
        }
    });

    App.ViewemployeeRoute = Ember.Route.extend({
      model: function(params) {
        return App.Employee.find(params);
      }
    });

    App.Employee.reopenClass({
      findAll: function() {
        var result = Ember.ArrayProxy.create({content: []});
        var self = this;
        $.ajax({
          url: 'data/Tutorials.json',
          type: 'GET',
          success: function(data, textStatus, xhr) {
            result.set('content', data);
          },
          error: function(xhr, textStatus, errorThrown) {
            alert('error');
          }
        });
        return result;
      },
      find: function(params) {
        var result = Ember.Object.create({content: null});
        var self = this;
        $.ajax({
          url: 'data/Tutorials.json',
          type: 'GET',
          success: function(data, textStatus, xhr) {
                data.forEach(function(item){
                    if(item.name === params.name)
                    {
                        result.set('content', item);
                    }
                });
            },
          error: function(xhr, textStatus, errorThrown) {
            alert('not found');
          }
        });
        return result;
      }
    });

And the my data file is -

[
    {
        "name": "John",
        "address": "John's Home",
        "phone": "John's Phone"
    },
    {
        "name": "Harry",
        "address": "Harry's Home",
        "phone": "Harry's Phone"
    },
    {
        "name": "Tom",
        "address": "Tom's Home",
        "phone": "Tom's Phone"
    }
]

we can find the work here -

http://www.phloxblog.in/ember-crud-ajax/

Answer 1

When you click on the view and pass a model via the #linkTo the model part of your route is not executed as it already knows the model.

Also, as a general rule, it's better to do the ajax calls in the model, not in the route.

App.ProjectsIndexRoute = Ember.Route.extend({  
  model: function() {
    return App.Project.findAll();
  }
});

App.Project.reopenClass({
  findAll: function() {
    var result = Ember.ArrayProxy.create({content: []});
    var self = this;
    $.ajax({
      url: '/projects.json',
      type: 'GET',
      data: {'user_id': App.currentUser.id},
      success: function(data, textStatus, xhr) {
        result.set('content', data.projects);
      },
      error: function(xhr, textStatus, errorThrown) {
        alert('error');
      }
    });

    return result;
  },

  find: function(project_id) {
    var result = Ember.Object.create({content: null, isLoaded: false});
    var self = this;
    $.ajax({
      url: '/projects/' + project_id + '.json',
      type: 'GET',
      success: function(data, textStatus, xhr) {
        result.setProperties(data.project);
        result.set('isLoaded', true);
      },
      error: function(xhr, textStatus, errorThrown) {
        alert('not found');
      }
    });

    return result;
  }
});