Ember.js Ajax调用未按预期工作

Question

我是Ember.js框架的新手。

我试图做从框架ajax调用，并没有得到预期的价值。

下面是在页面的代码 -

链接到第一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; 
    } 
});