Ember.js Ajax调用未按预期工作
问题描述:
我是Ember.js框架的新手。Ember.js Ajax调用未按预期工作
我试图做从框架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"
}
]
,我们可以在这里找到了工作 -
答
当你点击查看,并通过一通过#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;
}
});
我已根据您的更新编辑了我的问题。但问题仍然没有解决。你可以通过这段代码工作,给我一些方向。 – 2013-03-27 16:25:44
我必须补充一点,我不确定在返回语句之前ajax调用不会完成时如何工作。一个人可能不得不挂钩到模型对象本身而不是返回? – agmcleod 2013-03-27 19:57:19
@agmcleod您需要使用promise以使其正常工作。 – Rudi 2013-03-27 20:04:18