i have custom url for getting and saving json from server so i created an object for getting json :
App.Cubes = Ember.Object.extend();
App.Cubes.reopenClass({
findAll: function() {
var c = Ember.A();
var xhr = $.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'http://localhost:9095/service.asmx/getCubes',
data: '{}',
success: function(response) {
var data = JSON.parse(response.d);
$.each(data, function(i, v) {
c.pushObject(App.Cubes.create(v));
});
}
});
return c;
}
});
but i need to map these json to model like :
App.Cube = DS.Model.extend({
name: DS.attr('string'),
uniqueName: DS.attr('string')
});
and then using Cube model not using Cubes Object? but i dont know how to map these json or Cubes object to Cube model.it is important for me using ember-data not a simple ember object
Where is your controller code.
App.CubeController = Ember.ObjectController.extend({
actions: {
loadList: function(){
var value = this.get('yourValue');
if(value){
this.set('model', App.Cubes.findAll(value))
}
}
}
})
Related
Im stuck trying to.save() a record using Ember-Data 1.3 😵
When I perform a .save() nothing goes wrong but the request payload is empty:
I'm pretty convinced it's an issue with the ember-data request because from the back-end side the only data I got it's "token=blahblahblah". Also I took the request (copy as cURL) and I confirm it's empty:
Here's the .save() code:
var self = this;
this.set('isLoading',true);
return this.store.find('feed', feed_id).then(function(feed) {
//Setting the system_status of the feed to either 4 (archived) or 1 (normal)
feed.set('system_status',param);
//Persist to change to store (and server)
console.log(feed);
feed.save().then(function(){
//success
self.set('isLoading',false);
alert('ok');
},function(){
//Error
self.set('isLoading',false);
alert('error');
}) // => PUT to /feeds/id
});
RESTAdapter:
export default DS.RESTAdapter.extend({
host: 'http://localhost:8000/',
namespace: 'ed',
headers: {
"Content-type": "x-www-form-urlencoded" // workaround for laravel
}});
Model console.log before .save()
Any ideas?
The solution is indeed the Serializer, you can change it to send a POST request instead of a PUT request.
Update the DS.RESTAdapter with this code:
updateRecord: function(store, type, snapshot) {
var data = this.serialize(snapshot, { includeId: true });
var id = snapshot.id;
console.log(snapshot);
var url = ENV.apiUrl + "ed/" + snapshot.typeKey + "/" + snapshot.id;
return new Ember.RSVP.Promise(function(resolve, reject) {
jQuery.ajax({
type: 'POST',
url: url,
dataType: 'json',
data: data
}).then(function(data) {
Ember.run(null, resolve, data);
}, function(jqXHR) {
jqXHR.then = null; // tame jQuery's ill mannered promises
Ember.run(null, reject, jqXHR);
});
});
I am newbie to ember.js, I am using ember-1.9.1.js and ember-data for my project.
For back-end configuration I have created a REST API with core php and the db is MySQL.
Now I can create new records (posts) from client side using with DS.RESTAdapter's "createRecord" function.
But I don't know how to update a Record (post) with DS.RESTAdapter's "updateRecord" function.
When I try to call the "updateRecord" function from "App.PostController (doneEditing)" I got this error:
Uncaught TypeError: store.updateRecord is not a function --------- app.js
app.js code below
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('home');
}
});
App.ApplicationAdapter = DS.RESTAdapter.extend({
namespace: 'pran/webapp/rest_adapter/api',
createRecord: function(store, type, snapshot) {
var data = this.serialize(snapshot, { includeId: true });
var url = "api/new_post";
return new Ember.RSVP.Promise(function(resolve, reject) {
jQuery.ajax({
type: 'POST',
url: url,
dataType: 'json',
data: data
}).then(function(data) {
Ember.run(null, resolve, data);
}, function(jqXHR) {
jqXHR.then = null; // tame jQuery's ill mannered promises
Ember.run(null, reject, jqXHR);
});
});
},
updateRecord: function(store, type, snapshot) {
var data = this.serialize(snapshot, { includeId: true });
var id = snapshot.id;
var url = [type, id].join('/');
return new Ember.RSVP.Promise(function(resolve, reject) {
jQuery.ajax({
type: 'PUT',
url: url,
dataType: 'json',
data: data
}).then(function(data) {
Ember.run(null, resolve, data);
}, function(jqXHR) {
jqXHR.then = null; // tame jQuery's ill mannered promises
Ember.run(null, reject, jqXHR);
});
});
}
});
App.Store = DS.Store.extend({
revision: 12,
adapter: 'App.ApplicationAdapter'
});
App.Post = DS.Model.extend({
title: DS.attr('string'),
author: DS.attr('string'),
date: DS.attr('date'),
excerpt: DS.attr('string'),
body: DS.attr('string')
});
App.Router.map(function() {
this.resource('home');
this.resource('about');
this.resource('posts', function(){
this.resource('post', { path: ':post_id' });
});
this.resource('newstory' , {path : 'story/new'});
});
App.PostsRoute = Ember.Route.extend({
model: function() {
return this.store.filter('post', { id: true }, function(post) {
return post.get('id');
return this.store.find('post');
});
}
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('post', params.post_id);
}
});
App.NewstoryController = Ember.ObjectController.extend({
actions :{
save : function(){
var title = $('#title').val();
var author = $('#author').val();
var excerpt = $('#excerpt').val();
var body = $('#body').val();
var store = this.get('store');
var new_post = store.createRecord('post',{
title : title,
author : author,
date : new(Date),
excerpt : excerpt,
body : body
});
new_post.save();
this.transitionToRoute('posts');
}
}
});
App.PostController = Ember.ObjectController.extend({
isEditing: false,
actions: {
edit: function() {
this.set('isEditing', true);
},
doneEditing: function() {
this.set('isEditing', false);
var title = $('#title').val();
var excerpt = $('#excerpt').val();
var body = $('#body').val();
var store = this.get('store');
var update_post = store.updateRecord('post',{
title : title,
excerpt : excerpt,
body : body
});
update_post.save();
}
}
});
Somebody please suggest a way to fix the issue.
updateRecord is adapter's method not store's
so try next:
store.adapterFor(App.Post).updateRecord(...
this is fast fix
And better create Post object and call method .save() - it's not good practice to work with adapter from controller like
App.Post.create({
title : title,
excerpt : excerpt,
body : body
}).save();
P.S. The final solution was
App.NewstoryController = Ember.ObjectController.extend({
actions :{
save : function(){
var title = $('#title').val();
var author = $('#author').val();
var excerpt = $('#excerpt').val();
var body = $('#body').val();
var store = this.get('store');
var new_post = store.createRecord('Post',{
title : title,
author : author,
date : new(Date),
excerpt : excerpt,
body : body
});
new_post.save();
this.transitionToRoute('posts');
}
}
});
In my Controller i have open action.this action should remove all record of model and then send ajax request and get new models and replace model. my ember data adapter is LSA
OlapApp.OpenController = Ember.Controller.extend({
needs: ['application'],
actions: {
open: function() {
var self = this;
var xhr = $.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'http://localhost:9095/service.asmx/getModel',
data: '{}',
success: function(response) {
//Success Empty AxisModel;
var data = JSON.parse(response.d);
self.store.findAll('axisModel').then(function(items) {
console.log('try to delete');
items.forEach(function(item) {
item.deleteRecord();
item.save();
});
});
setTimeout(function() {
//Fill Axis Model
_.each(data.axisModel, function(v, i) {
var record = self.store.createRecord('axisModel', {
id: v["id"],
uniqueName: v["uniqueName"],
name: v["name"],
hierarchyUniqueName: v.hierarchyUniqueName,
type: v["type"],
isMeasure: v.isMeasure,
orderId: v.orderId,
isActive: v.isActive,
isAll: v.isAll,
sort: v.sort
});
record.save();
});
self.get('controllers.application').send('showNotification', 'Open', 'success');
}, 2000);
}
});
}
}
});
but when i try to create a new models i get this error :
Assertion failed: The id a12 has already been used with another record of type OlapApp.AxisModel.
Assertion failed: The id a13 has already been used with another record of type OlapApp.AxisModel.
SOLUTION
finally i find the solution.for fix this problem just wrap deleteRecord() in Ember.run.once like this :
self.store.findAll('axisModel').then(function(items) {
items.forEach(function(item){
Ember.run.once(function(){
item.deleteRecord();
item.save();
});
});
});
For deleting records there are problems using forEach because the result of a find to the store is a live array. You can see this discussion in GitHub https://github.com/emberjs/data/issues/772. You can make use of toArray() in order to make a static copy of the live array)
self.store.findAll('axisModel').then(
function(items) {
items.toArray().forEach(function(item){
item.deleteRecord();
item.save();
});
});
I'm writing a little ember app without using Ember-Data (using TheMovieDB API) and I don't understand why model is not load when I click on a {{#linkTo}} link, but when I refresh the page manually datas are loaded correctly.
Here is my App.js :
window.App = Ember.Application.create();
App.Router.map(function() {
this.route('about');
this.resource('movie', {
path: '/movie/:movie_id'
})
});
App.IndexRoute = Ember.Route.extend({
setupController: function (controller) {
var movies = [];
$.ajax({
url: "http://api.themoviedb.org/3/movie/popular?api_key=5b088f4b0e39fa8bc5c9d015d9706547",
type: "GET",
async: false,
success: function (data) {
var length = data.results.length;
data.results.forEach(function (item) {
if (item.backdrop_path != null) {
var tmp = item.backdrop_path;
item.backdrop_path = "http://cf2.imgobject.com/t/p/w500/"+tmp+"?api_key=5b088f4b0e39fa8bc5c9d015d9706547"
movies.push(item);
}
})
}
});
controller.set('content', movies);
}
});
App.MovieRoute = Ember.Route.extend({
model: function (param) {
var infos;
/* Important !! */
var promise = Ember.Deferred.create();
$.ajax({
url: "http://api.themoviedb.org/3/movie/"+param.movie_id+"?api_key=5b088f4b0e39fa8bc5c9d015d9706547",
type: "GET",
success: function (data) {
var tmp = data.backdrop_path;
data.backdrop_path = "http://cf2.imgobject.com/t/p/w500/"+tmp+"?api_key=5b088f4b0e39fa8bc5c9d015d9706547";
// infos = Ember.Object.create(data)
promise.resolve(data);
}
});
console.log("MODEL");
return promise;
},
setupController: function (controller, model) {
controller.set('content', model);
}
});
App.Movie = Ember.Object.extend({})
Thanks for your help !
Since you have not specified which model you mean, I'm assuming you mean the movie model, and with my assumption I'm trying to answer.
I think your problem is that your template expects the model coming from a MovieIndexController because you specified a resource in your router map instead of a simple route.
That said, the solution might be to rename your controller to MovieIndexController and respectively the route MovieIndexRoute.
Here the reference my answer is based on, under the paragraph Resources.
Hope it helps
I'm facing the problem with dynamic segments router v2.
here is the link for js "http://jsfiddle.net/q9zvU/5/".
var App = Ember.Application.create();
App.deferReadiness();
App.ApplicationView = Ember.View.extend({
templateName: 'campaign-app'
})
App.Router.map(function(match) {
this.route('campaigns', {path: '/:type'})
})
App.CampaignsRoute = Ember.Route.extend({
model: function() {
alert('called model method');
var data;
$.ajax({
url: '/echo/json/',
async: false,
data: {
json: JSON.encode([{
name: 'Campaign 1',
type: 'scheduled'
}, {
name: 'Campaign 2',
type: 'scheduled'
}, {
name: 'Campaign 2',
type: 'draft'
}])
},
dataType: 'json',
success: function(json) {
alert(JSON.stringify(json));
data = json;
}
})
return data;
},
renderTemplate: function() {
this.render({outlet: 'campaigns'});
}
})
App.CampaignsView = Ember.CollectionView.extend({
itemViewClass: Ember.View.extend({
templateName: 'campaigns'
})
})
App.advanceReadiness();
The model method of route isn't calling with linkTo and transitionTo. (It is clearly stated in ember's doc).
But for my case, I really need to have a point to load the data from ajax request in route.
Thanks,
Linn
Ember Documentation on the model hook:
"A hook you can implement to convert the URL into the model for this
route."
So the model hook is just called on page refresh. But this confuses a lot of people :-). So, this is not the right hook in this case. I think you should use the setupController hook for this case. Try this:
App.CampaignsRoute = Ember.Route.extend({
setupController: function(controller) {
alert('called setupController method');
var data;
$.ajax({
url: '/echo/json/',
async: false,
data: {
json: JSON.encode([{
name: 'Campaign 1',
type: 'scheduled'
}, {
name: 'Campaign 2',
type: 'scheduled'
}, {
name: 'Campaign 2',
type: 'draft'
}])
},
dataType: 'json',
success: function(json) {
alert(JSON.stringify(json));
data = json;
}
});
controller.set("model",data);
}
});
A little extra remark: It seems awkward that you do not wrap your objects in an Ember.Object. Normally you do not work on ordinary JS objects.