folks! Any examples of using ember-data to store data getted from remote server with cross-domain ajax request? Now I have this, but...
TravelClient.Tour = Ember.Object.extend({
});
TravelClient.Tour.reopenClass({
allTours: [],
find: function(){
$.ajax({
url: 'http://someIP:somePORT/tours.json',
dataType: 'jsonp',
context: this,
success: function(data){
data.forEach(function(tour){
this.allTours.addObject(TravelClient.Tour.create(tour))
}, this)
}
})
return this.allTours;
}
});
UPDATE: Now i'm doing it in this way:
TravelClient.Tour.reopenClass({
allTours: [],
find: function(){
$.ajax({
url: 'http://someIP:somePORT/tours.json',
dataType: 'jsonp',
context: this,
success: function(response){
response.data.forEach(function(tour){
this.allTours.addObject(TravelClient.Tour.create(tour))
}, this)
}
})
return this.allTours;
}
});
But get this error:
Uncaught TypeError: Cannot call method 'forEach' of undefined
SNAPSHOT:
with this:
$.ajax({
dataType: 'jsonp',
url:"http://192.168.1.39:3000/tours.json",
success:function(response){
return response.data;
}
});
I get this:
Object
abort: function (e){var t=e||S;return r&&r.abort(t),N(0,t),this}
always: function (){return i.done(arguments).fail(arguments),this}
complete: function (){if(a){var t=a.length;(function r(t){y.each(t,function(t,n){var i=y.type(n);i==="function"?(!e.unique||!c.has(n))&&a.push(n):n&&n.length&&i!=="string"&&r(n)})})(arguments),i?o=a.length:n&&(s=t,l(n))}return this}
done: function (){if(a){var t=a.length;(function r(t){y.each(t,function(t,n){var i=y.type(n);i==="function"?(!e.unique||!c.has(n))&&a.push(n):n&&n.length&&i!=="string"&&r(n)})})(arguments),i?o=a.length:n&&(s=t,l(n))}return this}
error: function (){if(a){var t=a.length;(function r(t){y.each(t,function(t,n){var i=y.type(n);i==="function"?(!e.unique||!c.has(n))&&a.push(n):n&&n.length&&i!=="string"&&r(n)})})(arguments),i?o=a.length:n&&(s=t,l(n))}return this}
fail: function (){if(a){var t=a.length;(function r(t){y.each(t,function(t,n){var i=y.type(n);i==="function"?(!e.unique||!c.has(n))&&a.push(n):n&&n.length&&i!=="string"&&r(n)})})(arguments),i?o=a.length:n&&(s=t,l(n))}return this}
getAllResponseHeaders: function (){return E===2?s:null}
getResponseHeader: function (e){var t;if(E===2){if(!o){o={};while(t=wn.exec(s))o[t[1].toLowerCase()]=t[2]}t=o[e.toLowerCase()]}return t==null?null:t}
overrideMimeType: function (e){return E||(c.mimeType=e),this}
pipe: function (){var e=arguments;return y.Deferred(function(n){y.each(t,function(t,s){var o=s[0],u=y.isFunction(e[t])&&e[t];i[s[1]](function(){var e=u&&u.apply(this,arguments);e&&y.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[o+"With"](this===r?n.promise():this,u?[e]:arguments)})}),e=null}).promise()}
progress: function (){if(a){var t=a.length;(function r(t){y.each(t,function(t,n){var i=y.type(n);i==="function"?(!e.unique||!c.has(n))&&a.push(n):n&&n.length&&i!=="string"&&r(n)})})(arguments),i?o=a.length:n&&(s=t,l(n))}return this}
promise: function (e){return e!=null?y.extend(e,r):r}
readyState: 4
setRequestHeader: function (e,t){var n=e.toLowerCase();return E||(e=b[n]=b[n]||e,g[e]=t),this}
state: function (){return n}
status: 200
statusCode: function (e){var t;if(e)if(E<2)for(t in e)m[t]=[m[t],e[t]];else x.always(e[x.status]);return this}
statusText: "success"
success: function (){if(a){var t=a.length;(function r(t){y.each(t,function(t,n){var i=y.type(n);i==="function"?(!e.unique||!c.has(n))&&a.push(n):n&&n.length&&i!=="string"&&r(n)})})(arguments),i?o=a.length:n&&(s=t,l(n))}return this}
then: function (){var e=arguments;return y.Deferred(function(n){y.each(t,function(t,s){var o=s[0],u=y.isFunction(e[t])&&e[t];i[s[1]](function(){var e=u&&u.apply(this,arguments);e&&y.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[o+"With"](this===r?n.promise():this,u?[e]:arguments)})}),e=null}).promise()}
__proto__: Object
This is more a about how the server should return data to the client than about ember-data, what you need to do is, wrap the response to the ajax call in a callback whose value is sent as a parameter to the server. Once you do that, it's business as usual for ember-data ie quite transparent to it
Here's an example using ruby on rails
On the client side
$.ajax({
dataType: 'jsonp',
success: function(response) {
// loop through your objects
response.accounts.forEach(function(account){
console.info(account.id)
})
}
});
On the server side you should do something similar to
params[:callback] + '("' + response + '");';
Yielding for example a response similar to:
callbackValue00923411(
{
"accounts":
[
{
"id": 123,
"name": "Personal",
},
{
"id": 234,
"name": "Corporate",
}
]
}
);
Then in your success function you access the list of accounts, as I stated above, this way
success: function(response) {
// loop through your objects
response.accounts.forEach(function(account){
console.info(account.id)
})
}
Here's an example on how to use/handle jsonp ajax request
If you have access to the server, you may consider configuring it to use CORS instead and avoid using jsonp
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.