emberjs显示从ajax调用返回的对象 [英] emberjs display an object return from an ajax call
问题描述
我有这个错误：
加载路由时出错：TypeError：Object＃< Object>没有方法'addArrayObserver'
使用此代码：
< script type =text / x-handlebarsdata-template-name =inquiry>
{{link-to'inquiries'class =create-btn}}返回查询{{/ link-to}}
< div class =enquiry-信息>
< button {{actionupdate}}>更新< / button>
< table>
< tr>
< td> {{enquiry.customerName}}< / td>
< / tr>
< tr>
< td> {{customerEmail}}< / td>
< / tr>
< tr>
< td> {{customerPhone}}< / td>
< / tr>
< / table>
< / div>
{{outlet}}
< / script>
我的控制器：
App.EnquiriesController = Ember.ArrayController.extend（{
actions：{
clickBtn：function（id）{
console.log（'DEBUG：ClickBtn OK id = '+ id）;
this.transitionToRoute（'inquiry'，id）;
}
}
}）;
路由器：
code> App.EnquiryRoute = Ember.Route.extend（{
model：function（param）{
console.log（'inquiry id ='+ param.enquiry_id）;
return App.Enquiries.findOne（param.enquiry_id）;
}
}）;
为了更好的解释，我有一个按钮，当用户点击它时，它触发clickBtn功能。
在我的路由器中返回一个来自我的服务器的ajax调用的内容。
这个东西是给我一个对象，似乎ember喜欢有一个数组否？
是否可以在模板中显示一个对象？
这是ajax调用：
findOne：function（id）{
var result = {};
$ .ajax（{
url：host +'mdf / inquiry /'+ id，
type：'GET'，
接受：'application / json'，
success：function（data）{
result = data;
}，
error：function（）{
console.log（'DEBUG：GET Inquiry'+ id + 'Failed'）;
}
}）;
返回结果;
}
感谢您的帮助！ ：）
我的路由器地图：
App.Router.map（function（）{
this.resource（'login'，{path：'/'}）;
this。 resource（'home'）;
this.resource（'inquiries'，function（）{
this.route（'create'）;
}）;
this.resource （'query'，{path：'/：enquiry_id'}，function（）{
this.route（'update'）;
}）;
}）;
这是从服务器回来的对象：
Object {ok：true，query：Object}
查询：对象
-createdAt：2014-02-03T15：32：16.000Z
-customerEmail：marco@email.com
-customerName：名称测试
-customerPhone：01523456789
-id：1
-__ proto__对象
ok：true
__proto__：对象
Ember具有ArrayController和ObjectController。看起来你需要声明
App.EnquiriesController = Ember.ObjectController.extend（{
App.EnquiriesController = Ember.ArrayController.extend（{
编辑：为了回应您的更多信息的编辑，我看到几个问题。
首先，最重要的是：您的查询路由是一个序列化路由，结果Ember将以与其他路线不同的方式处理此路由的模型。
如果您通过键入相应的URL转换到此路由，路由将行为方式正确对应于您的Ember.Route对象/模型钩子。但是。如果您通过 transitionToRoute（'询问'）转换到此路由或 {{link to'inquiry'}} ，它的行为不正确你的转换和linkTos应该是格式 transitionToRoute（'en quiry'，modelObject）和 {{＃linkTo'inquiry'modelObject}} ，但是，似乎你传递一个 id 而不是你的ajax电话的返回。
所以更换：
App.EnquiriesController = Ember.ArrayController.extend（{
actions：{
clickBtn：function（id）{
console.log（'DEBUG： ClickBtn OK id ='+ id）;
this.transitionToRoute（'inquiry'，id）;
}
}
}）;
与
App.EnquiriesController = Ember.ArrayController.extend（{
actions：{
clickBtn：function（id）{
console.log（'DEBUG：ClickBtn OK id ='+ id）;
this.transitionToRoute（'query'，App.Enquiries.findOne（id））;
}
}
}）;
此外，在您的模板中，您的所有车把助手的格式应为 {{inquiry。[propertyName]}} 如果您希望访问查询对象中持有的属性。您正确地为 customerName 而不是其他2个属性。
编辑＃2，更难编辑： / p>
发现其他问题。
您的Ajax调用有问题。您返回的对象将始终为空对象。这是因为ajax调用是异步的。您不能依靠ajax调用按照您输入的顺序运行。
以下是您的程序当前运行的顺序：
-
var result = {}; - 发送Ajax调用
-
返回结果; - 等待响应时间过去一段时间。 ...
- 返回Ajax调用。
-
result = data;...但是我们已经在步骤3中返回了一个空的结果
因为你的ajax调用是相当简单的，你不会对返回的数据进行任何转换，我建议将 findOne 函数替换为：
findOne：function（id）{
return $ .ajax（{
url：host +'mdf / inquiry /'+ id，
类型：'GET'，
接受：'application / json'，
success：function（data）{
console.log（'DEBUG：GET Inquiry'+ id +'成功'）;
返回数据;
}，
错误：function（）{
console.log（'DEBUG：GET Inquiry'+ id +'Failed'）;
}
}）;
}
此外，为了回应您的评论，您是否应该保持模型挂起你的EnquiryRoute：是的。如果一个人要输入与该路由相关联的URL，那么模型钩子将触发（因为没有给出modelObject）。如果您删除模型挂钩，该应用程序将仅在单击应用程序中的链接时起作用，如果从网址输入应用程序将导致错误。
I have a small problem with my ember app, but I still don't know how to solve it..
I have this error :
Error while loading route: TypeError: Object #<Object> has no method 'addArrayObserver'
With this code :
<script type="text/x-handlebars" data-template-name="enquiry">
{{#link-to 'enquiries' class="create-btn"}}Back to the enquiries{{/link-to}}
<div class="enquiry-info">
<button {{action "update"}}>Update</button>
<table>
<tr>
<td>{{enquiry.customerName}}</td>
</tr>
<tr>
<td>{{customerEmail}}</td>
</tr>
<tr>
<td>{{customerPhone}}</td>
</tr>
</table>
</div>
{{outlet}}
</script>
My controller :
App.EnquiriesController = Ember.ArrayController.extend({
actions: {
clickBtn: function( id ) {
console.log('DEBUG: ClickBtn OK id = ' + id);
this.transitionToRoute('enquiry', id);
}
}
});
Router :
App.EnquiryRoute = Ember.Route.extend({
model: function( param ) {
console.log('Enquiry id = ' + param.enquiry_id);
return App.Enquiries.findOne(param.enquiry_id);
}
});
To explain this better, I have a button, and when the user click on it, it trigger the clickBtn function. That return in my router the content of an ajax call from my server.
The thing is that is return me an object and it seems that ember prefer to have an array no ?
Is it possible to display an object in the template instead ?
Here is the ajax call :
findOne: function(id) {
var result = {};
$.ajax({
url: host + 'mdf/enquiry/' + id,
type: 'GET',
accepts: 'application/json',
success: function (data) {
result = data;
},
error: function() {
console.log('DEBUG: GET Enquiry ' + id + ' Failed');
}
});
return result;
}
Thanks for the help !! :)
[edit]
My router map :
App.Router.map(function() {
this.resource('login', { path: '/' });
this.resource('home');
this.resource('enquiries', function (){
this.route('create');
});
this.resource('enquiry', { path: '/:enquiry_id' }, function(){
this.route('update');
});
});
This is the object I've back from the server :
Object {ok: true, enquiry: Object}
enquiry: Object
-createdAt: "2014-02-03T15:32:16.000Z"
-customerEmail: "marco@email.com"
-customerName: "Name Test"
-customerPhone: "01523456789"
-id: 1
-__proto__: Object
ok: true
__proto__: Object
Ember has both ArrayControllers and ObjectControllers. It looks like you need to declare
App.EnquiriesController = Ember.ObjectController.extend({
insted of
App.EnquiriesController = Ember.ArrayController.extend({
EDIT: In response to your edit with more info, I see a couple of issues.
First, and most importantly: Your enquiry route is a serialized route. As a result, ember will handle the model for this route in a different way than it does other routes.
If you transition to this route by typing in the corresponding URL, the route will behave in a way that rightfully corresponds to your Ember.Route object/model hook. However. If you transition to this route via transitionToRoute('enquiry') or {{#linkTo 'enquiry'}}, it will not behave correctly. Your transitions and linkTos should be in format transitionToRoute('enquiry', modelObject) and {{#linkTo 'enquiry' modelObject}}, however, it seems you are passing an id rather than the returned of your ajax call.
So replace:
App.EnquiriesController = Ember.ArrayController.extend({
actions: {
clickBtn: function( id ) {
console.log('DEBUG: ClickBtn OK id = ' + id);
this.transitionToRoute('enquiry', id);
}
}
});
with
App.EnquiriesController = Ember.ArrayController.extend({
actions: {
clickBtn: function( id ) {
console.log('DEBUG: ClickBtn OK id = ' + id);
this.transitionToRoute('enquiry', App.Enquiries.findOne(id));
}
}
});
In addition, on your template, all of your handlebar helpers should be in the format {{enquiry.[propertyName]}} if you wish to access properties held within the enquiry object. You did this correctly for customerName but not for the other 2 properties.
EDIT #2, edit harder:
Additional issues are found.
There's a problem with your Ajax call. The object you return will always be an empty object. That's because ajax calls are asynchronous. You can not rely on an ajax call to run in the order you type it in.
Here's the order that your program is currently running in:
var result = {};- Ajax call is sent out.
return result;- Some time passes as we wait for a response....
- Ajax call is returned.
result = data;... But we already returned an emptyresultin step 3!
Because your ajax call is fairly simple and you don't do any transformations on the returned data, I would suggest replacing your findOne function with:
findOne: function(id) {
return $.ajax({
url: host + 'mdf/enquiry/' + id,
type: 'GET',
accepts: 'application/json',
success: function (data) {
console.log('DEBUG: GET Enquiry ' + id + ' Succeeded');
return data;
},
error: function() {
console.log('DEBUG: GET Enquiry ' + id + ' Failed');
}
});
}
Additionally, in response to your comment about whether you should keep the model hook in your EnquiryRoute: Yes. If a person were to type in the URL associated with that route, then the model hook will trigger (because there will be no modelObject given). If you remove the model hook, the app will only work when clicking links within the app, and will cause errors if you enter the app from a url.
这篇关于emberjs显示从ajax调用返回的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
