我决定不使用 ember-data,因为它尚未准备好生产并且仍在变化。无论如何,我的应用程序只需要发出一些 ajax 请求,所以它不应该有太大的不同。我无法理解如何处理 ajax promise 响应。
当我的用户加载应用程序时,他们已经有一个经过身份验证的 session 。我正在尝试为该用户信息 ping 服务器并将其显示在我的模板中。似乎我的模板在我的 ajax 请求返回结果之前呈现,然后没有更新 promise 。
// route
App.ApplicationRoute = Ember.Route.extend({
setupController: function(){
this.set("currentUser", App.User.getCurrentUser());
}
});
// model
App.User = Ember.Object.extend({
email_address: '',
name_first: '',
name_last: '',
name_full: function() {
return this.get('name_first') + ' ' + this.get('name_last');
}.property('name_first', 'name_last')
});
App.User.reopenClass({
getCurrentUser: function() {
return $.ajax({
url: "/api/get_current_user",
type: "POST",
data: JSON.stringify({})
}).then(function(response) {
return response;
});
}
});
在我的模板中:
<h1> Hey, {{App.currentUser.name_first}}</h1>
当我收到响应或延迟渲染直到我有响应时,我将如何更新模板?
最佳答案
其实答案很简单:你不需要使用promise。而是只返回一个空对象。您的代码可能如下所示:
App.User.reopenClass({
getCurrentUser: function() {
var user = App.User.create({}); //create an empty object
$.ajax({
url: "/api/get_current_user",
type: "POST",
data: JSON.stringify({})
}).then(function(response) {
user.setProperties(response); //fill the object with your JSON response
});
return user;
}
});
这里发生了什么?
注意:到底发生了什么? 上面提到的流程不是这些操作发生的顺序。实际上,首先执行第 1,2 和 4 点。然后一段时间后,当响应从您的服务器返回时,执行 3。 所以真正的 Action 流程是:1 -> 2 -> 4 -> 3。
所以一般规则是始终返回一个对象,使 Ember 能够执行其逻辑。 在您的案例中,不会首先显示任何值,一旦您的对象被填充,Ember 将开始发挥其魔力并自动更新您的模板。无需在您身边做任何艰苦的工作!
超越最初的问题:如何用数组做到这一点?
遵循此一般规则,您将返回一个空数组。这里有一个小例子,它假设您可能希望从后端获取所有用户:
App.User.reopenClass({
getAllUsers: function() {
var users = []; //create an empty array
$.ajax({
url: "/api/get_users",
}).then(function(response) {
response.forEach(function(user){
var model = App.User.create(user);
users.addObject(model); //fill your array step by step
});
});
return users;
}
});
关于asynchronous - 没有 Ember 数据的 AJAX promise ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15608431/