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