Building Model object from multiple rest calls - ember.js

I have a route like following where it builds the data from multiple rest calls.
App.IndexRoute = Ember.Route.extend({
model: function() {
var id = 1; //will get as url param later
var modelData = {ab:{},ef:{}};
return ajaxPromise('https://url1/'+ id +'?order=desc').then(function(data){
modelData.ab = data.items[0];
return ajaxPromise('https://url2/'+ id +'/?order=desc').then(function(data){
modelData.ab.x = data.items;
return modelData;
})
});
}
});
My ajaxPromise function is as follows:
var ajaxPromise = function(url, options){
return Ember.RSVP.Promise(function(resolve, reject) {
var options = options || {
dataType: 'jsonp',
jsonp: 'jsonp'
};
options.success = function(data){
resolve(data);
};
options.error = function(jqXHR, status, error){
reject(arguments);
};
Ember.$.ajax(url, options);
});
};
Now the issue is i know that i can use RSVP.all with promise instances but the data returned from these url has to be set to model object like above.
Also there may be few more rest calls which require data from other rest call. Is there any other way i can handle this promises.
PS: data is required right away for a single route

App.IndexRoute = Ember.Route.extend({
model: function() {
var id = 1; //will get as url param later
return Ember.RSVP.hash({
r1: ajaxPromise('https://url1/'+ id +'?order=desc'),
r2: ajaxPromise('https://url2/'+ id +'/?order=desc')
});
},
setupController:function(controller, model){
model.ab = model.r1.items[0];
model.ab.x = model.r2.items;
this._super(controller, model);
}
);
If you have two that have to run synchronously(second depends on first), you can create your own promise, which eon't resolve until you call resolve.
model: function() {
var promise = new Ember.RSVP.Promise(function(resolve, reject){
var modelData = {ab:{},ef:{}};
ajaxPromise('https://url1/'+ id +'?order=desc').then(function(data){
modelData.ab = data.items[0];
ajaxPromise('https://url2/'+ id +'/?order=desc').then(function(data){
modelData.ab.x = data.items;
resolve(modelData);
})
});
});
return promise;
},

Related

model returns null on controller

i'm working with a a router and a controller, and i need to complete some operations on the controller, this is my model code
AcornsTest.StockRoute = Ember.Route.extend({
model: function(params) {
"use strict";
var url_params = params.slug.split('|'),
url = AcornsTest.Config.quandl.URL + '/' + url_params[0] + '/' + url_params[1] + '.json',
stockInStore = this.store.getById('stock', url_params[1]),
today = new Date(),
yearAgo = new Date(),
self = this;
yearAgo.setFullYear(today.getFullYear() - 1);
today = today.getFullYear()+'-'+today.getMonth()+'-'+today.getDate();
yearAgo = yearAgo.getFullYear()+'-'+yearAgo.getMonth()+'-'+yearAgo.getDate();
if(stockInStore && stockInStore.get('data').length) {
return stockInStore;
}
return Ember.$.getJSON(url,{ trim_start: yearAgo, trim_end: today, auth_token: AcornsTest.Config.quandl.APIKEY })
.then(function(data) {
if(stockInStore) {
return stockInStore.set('data', data.data);
} else {
return self.store.createRecord('stock', {
id: data.code,
source_code: data.source_code,
code: data.code,
name: data.name,
description: data.description,
display_url: data.display_url,
source_name: data.source_name,
data: data.data,
slug: data.source_code+'|'+data.code
});
}
});
}
});
and this is my controller
AcornsTest.StockController = Ember.ObjectController.extend({
init: function() {
"use strict";
this.send('generateChartInfo');
},
actions: {
generateChartInfo: function() {
"use strict";
console.log(this.model);
console.log(this.get('model'));
}
}
});
from the controller i'm trying to get access to the model to get some information and format it, and send it to the view
but this.model or this.get('model') always returns null, how can i successful get access to the model from the controller? thanks
You are overriding the init method, but its broken, do this:
AcornsTest.StockController = Ember.ObjectController.extend({
init: function() {
"use strict";
this._super();
this.send('generateChartInfo');
});
You need to call the parent method.
See this test case: http://emberjs.jsbin.com/gijon/3/edit?js,console,output
The model is not ready at init time. If anyone has official docs please share.

Emberjs - setProperties from a Promise

I'm trying to set a variable in my router from the inside of a promise, but it seems that it is not set properly.
I have create a small example to show you :
App.ApplicationRoute = Ember.Route.extend({
myVar: null,
model: function() {
var data = getData();
console.log(myVar); // = null
return data;
},
getData: function() {
var self = this;
return new Ember.RSVP.Promise( function(resolve, reject) {
self.setProperties({ myVar: 42 });
resolve(someGoodStuff);
reject(someBadStuff)
});
}
})
When I try to display myVar, it still at null even when it was waiting for the promise to resolve...
Do I need to do something special ? or I'm doing it wrongly ?
I believe you are looking for something like this: http://emberjs.jsbin.com/gosoj/3/edit?html,css,js,output
I'm not entirely sure what you are going for here, so there is also some other commented code that may have been your intention.
I think maybe the problem was when you were console logging, as well as the fact that you weren't using your getters and setters properly, and the way you were calling getData()
Here is the code:
App.ApplicationRoute = Ember.Route.extend({
myVar: null,
model: function() {
var data = this.getData();
console.log(data);
console.log(this.get('myVar')); // = null
return data;
},
getData: function() {
var self = this;
return new Ember.RSVP.Promise( function(resolve, reject) {
self.setProperties({ myVar: 42 });
resolve(42);
reject(reason);
}).then(function (value) {
//self.setProperties({ myVar: value });
console.log(self.get('myVar'));
}, function(reason){
console.log(reason);
});
}
})

ArrayController Not Updating When Deleting Records

using ember-data 1.0.0-beta.5 and have the following routes and router
App.Router.map(function () {
this.resource('users', function () {
this.route('new');
});
this.resource('user', { path: '/user/:id' }, function () {
this.route('edit');
});
});
App.UsersIndexRoute = Ember.Route.extend({
model: function(){
return this.store.findAll('user');
},
setupController: function (controller, data) {
this._super(controller, data);
}
});
App.UserEditRoute = Ember.Route.extend({
model: function() {
return this.store.find('user', this.modelFor("user").id);
},
setupController: function (controller, data) {
this._super(controller, data);
},
actions: {
delete: function(){
var router = this;
var model = this.currentModel;
model.destroyRecord().then(function(){
router.transitionTo('users');
});
}
}
});
However when i transition back to the users route the ArrayController still has the deleted object in it. Any ideas as to why this is or how to wait until it is removed before transitioning?
kind of a work around but solves the problem.
in the UsersIndexContoller add a array to store the deleted ids
App.UsersIndexController = Ember.ArrayController.extend({
deleted: []
});
Then just append the id of the deleted model to this array and filter in the setupController method.
App.UsersEditRoute = Ember.Route.extend({
delete: function(){
var router = this;
var model = this.currentModel;
var usersController = this.controllerFor('users.index');
model.destroyRecord().then(function(){
usersController.get('deleted').push(model.id);
router.transitionTo('users');
});
}
}
});
App.UsersIndexRoute = Ember.Route.extend({
setupController: function (controller, data) {
var deleted = this.controller.get('deleted');
var filtered = data.filter(function(user){
return !deleted.contains(user.id);
});
data.set('content', filtered);
this._super(controller, data);
}
});
In your case since you want to refetch all of the users and your server lies to you about deleting the record (or it happens later), you might contemplate transitioning then deleting.
delete: function(){
var model = this.currentModel;
this.transitionTo('users').then(function(){
model.destroyRecord();
});
}

Load model like a refresh without ember-data

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

Delete associated model with ember-data

I have two models:
App.User = DS.Model.create({
comments: DS.hasMany('App.Comment')
});
App.Comment = DS.Model.create({
user: DS.belongsTo('App.User')
});
When a user is deleted, it also will delete all its comments on the backend, so I should delete them from the client-side identity map.
I'm listing all the comments on the system from another place, so after deleting a user it would just crash.
Is there any way to specify this kind of dependency on the association? Thanks!
I use a mixin when I want to implement this behaviour. My models are defined as follows:
App.Post = DS.Model.extend(App.DeletesDependentRelationships, {
dependentRelationships: ['comments'],
comments: DS.hasMany('App.Comment'),
author: DS.belongsTo('App.User')
});
App.User = DS.Model.extend();
App.Comment = DS.Model.extend({
post: DS.belongsTo('App.Post')
});
The mixin itself:
App.DeletesDependentRelationships = Ember.Mixin.create({
// an array of relationship names to delete
dependentRelationships: null,
// set to 'delete' or 'unload' depending on whether or not you want
// to actually send the deletions to the server
deleteMethod: 'unload',
deleteRecord: function() {
var transaction = this.get('store').transaction();
transaction.add(this);
this.deleteDependentRelationships(transaction);
this._super();
},
deleteDependentRelationships: function(transaction) {
var self = this;
var klass = Ember.get(this.constructor.toString());
var fields = Ember.get(klass, 'fields');
this.get('dependentRelationships').forEach(function(name) {
var relationshipType = fields.get(name);
switch(relationshipType) {
case 'belongsTo': return self.deleteBelongsToRelationship(name, transaction);
case 'hasMany': return self.deleteHasManyRelationship(name, transaction);
}
});
},
deleteBelongsToRelationship: function(name, transaction) {
var record = this.get(name);
if (record) this.deleteOrUnloadRecord(record, transaction);
},
deleteHasManyRelationship: function(key, transaction) {
var self = this;
// deleting from a RecordArray doesn't play well with forEach,
// so convert to a normal array first
this.get(key).toArray().forEach(function(record) {
self.deleteOrUnloadRecord(record, transaction);
});
},
deleteOrUnloadRecord: function(record, transaction) {
var deleteMethod = this.get('deleteMethod');
if (deleteMethod === 'delete') {
transaction.add(record);
record.deleteRecord();
}
else if (deleteMethod === 'unload') {
var store = this.get('store');
store.unloadRecord(record);
}
}
});
Note that you can specify via deleteMethod whether or not you want to send the DELETE requests to your API. If your back-end is configured to delete dependent records automatically, then you will want to use the default.
Here's a jsfiddle that shows it in action.
A quick-and-dirty way would be to add the following to your user model
destroyRecord: ->
#get('comments').invoke('unloadRecord')
#_super()
I adapted the answer of #ahmacleod to work with ember-cli 2.13.1 and ember-data 2.13.0. I had an issue with nested relationships and the fact that after deleting an entity from the database its id was reused. This lead to conflicts with remnants in the ember-data model.
import Ember from 'ember';
export default Ember.Mixin.create({
dependentRelationships: null,
destroyRecord: function() {
this.deleteDependentRelationships();
return this._super()
.then(function (model) {
model.unloadRecord();
return model;
});
},
unloadRecord: function() {
this.deleteDependentRelationships();
this._super();
},
deleteDependentRelationships: function() {
var self = this;
var fields = Ember.get(this.constructor, 'fields');
this.get('dependentRelationships').forEach(function(name) {
self.deleteRelationship(name);
});
},
deleteRelationship (name) {
var self = this;
self.get(name).then(function (records) {
if (!records) {
return;
}
var reset = [];
if (!Ember.isArray(records)) {
records = [records];
reset = null;
}
records.forEach(function(record) {
if (record) {
record.unloadRecord();
}
});
self.set(name, reset);
});
},
});
Eventually, I had to set the relationship to [] (hasMany) or null (belongsTo). Else I would have run into the following error message:
Assertion Failed: You cannot update the id index of an InternalModel once set. Attempted to update <id>.
Maybe this is helpful for somebody else.