Ember.js Ajax звонок не работает должным образом

Question

Я новичок в области Ember.js.

Я пытался сделать вызов ajax с помощью Framework и не получал значения, как ожидалось.

Ниже приведен код в страницы -

Ссылка на первый вызов Ajax, и она работает, как ожидалось.

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

данные вызовов для заполнения таблицы -

App.ListemployeeRoute = Ember.Route.extend({ 
     setupController: function(controller) { 
     $.getJSON('data/Tutorials.json', function(data) { 
      controller.set('content',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> 

выше работает, как ожидалось.

Но когда я нажал на

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

для вышеприведенного раздела -

код

Моего контроллера находится в App.js -

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

И мой ViewemployeeRoute является

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); 
       } 
      }); 
     }); 
     } 
    }); 

и мой шаблон код -

<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> 

Проблема -

Данные для работника не приходит, когда я нажав на View Ссылка на первый раз.

Но когда я обновляю страницу, данные поступают так, как ожидалось.

Я думаю, проблема в том, что когда я нажимаю на ссылку View, ответ от ajax приходит позже после рендеринга страницы.

Итак, что мне делать в коде, чтобы у меня была информация о сотруднике по ссылке на ссылку View?

Оцените любую помощь в этом отношении.

Спасибо.

Обновление 2 после попытки ответа. Но все тот же результат наступает.

Я изменил свое приложение.JS следующим образом -

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; 
     } 
    }); 

И мой файл данных -

[ 
    { 
     "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" 
    } 
] 

мы можем найти работу здесь -

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

Answer 1

При нажатии на представлении и передать модели с помощью #linkТо модельная часть вашего маршрута не выполняется, поскольку она уже знает модель.

Также, как правило, лучше использовать вызовы ajax в модели, а не в маршруте.

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; 
    } 
});