Load model like a refresh without ember-data - ember.js

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

Related

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();
});
}

Building Model object from multiple rest calls

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;
},

How to fetch a ember model with a more complex url

I'm using EmberData and wonder how I can I fetch a model from path like this:
products/:id/comments
Considering that you are using the default RESTAdapter, this is one possible way — although I'm not sure if it's the best one:
App = Ember.Application.create();
App.ProductCommentsRoute = Ember.Route.extend({
model: function() {
var productId = this.controllerFor('product').get('model').get('id');
return App.Comment.find({ product_id: productId });
}
});
App.Router.map(function() {
this.resource('products', function() {
this.resource('product', { path: ':product_id' }, function() {
this.route('comments');
})
});
});

emberjs controller's needs returns undefined and unable to access controller.content

I am trying to use Emberjs needs api* to access Postscontroller from a comments controller. The PostController is backed by a route while I don't want the comment's controller to have a route.
In the comments controller, I have needs: ['posts', 'postsShow']. From the comments controller, when I run console log with the following commands,:
console.log( this.get('controllers.postsShow') );
console.log( this.get('controllers.posts') );
In the console I see:
<EmBlog.PostsShowController:ember396> { target=<EmBlog.Router:ember316>, namespace=EmBlog, store=<EmBlog.Store:ember336>
<EmBlog.PostsController:ember304> { target=<EmBlog.Router:ember316>, namespace=EmBlog, store=<EmBlog.Store:ember336>
However, when I try to access the controller content for PostsShowController or PostsController, it always returns post undefined. These are various approaches I have tried and still got post undefined:
var post = this.get('controllers.posts').get('content');
or
var post = this.get('controllers.posts.content');
Also I tried to get 'comments' from the content like this:
var post = this.get('controllers.posts')
var comment = post.get('comments');
or
comment = post.comments;
I still got the error:
TypeError: post is undefined comment = post.comments;
TypeError: post is undefined var comment = post.get('comments');
Which also means:
var post = this.get('controllers.posts.model').get('store.transaction');
also returns post is undefined.
This is the jsfiddle and the relevant section of the code is pasted below:
EmBlog.PostsNewController = Ember.ObjectController.extend({
content: null
});
EmBlog.PostsShowController =
Ember.ObjectController.extend({
content: null
});
EmBlog.CommentNewController = Em.ObjectController.extend({
needs: ['posts', 'postsShow'],
isAddingNew: false,
addComment: function(body){
console.log( this.get('controllers.postsShow') );
console.log( this.get('controllers.posts') );
var post = this.get('controllers.posts.content');
store = post.get('store.transaction');
}
});
Many thanks
That's because posts controller is empty. You are filling the posts in PostIndexController, not PostsController.
Check the route:
EmBlog.PostsRoute = Ember.Route.extend({
});
EmBlog.PostsIndexRoute = Ember.Route.extend({
model: function(){
return EmBlog.Post.find();
},
setupController: function(controller, model){
controller.set('content', model);
}
});
So you should either do
needs: ['postsIndex', 'postsShow']
and then:
this.get('controllers.postsIndex.content')
or fix your route:
EmBlog.PostsRoute = Ember.Route.extend({
model: function() {
return EmBlog.Post.find();
}
});
EmBlog.PostsIndexRoute = Ember.Route.extend({
model: function(){
return this.modelFor('posts');
},
setupController: function(controller, model){
controller.set('content', model);
}
});
Updated fiddle

Can a nested ember.js route use a different model and still retain controller context?

I have a basic person object
PersonApp.Person = DS.Model.extend({
username: DS.attr('string')
});
I have a route to find all people
PersonApp.Router.map(function(match) {
this.resource("person", { path: "/" }, function() {
this.route("page", { path: "/page/:page_id" });
this.route("search", { path: "/search/:page_term" });
});
});
In my route I'm looking at the params coming in
PersonApp.PersonRoute = Ember.Route.extend({
selectedPage: 1,
filterBy: '',
model: function(params) {
if (get(params, 'page_id') !== undefined) {
this.selectedPage = get(params, 'page_id');
} else {
this.selectedPage = 1;
}
if (get(params, 'page_term') !== undefined) {
this.filterBy = get(params, 'page_term');
} else {
this.filterBy = '';
}
console.log(this.selectedPage);
console.log(this.filterBy);
return PersonApp.Person.find();
}
});
My nested routes are using a different model (not person directly) as they contain data that isn't persisted (and really only let me flip a bit on the controller)
Yet when I manually put something on the url or click a link that does a full blown transition the "params" coming into my model hook above are always empty.
Here is the basic page model I'm using (w/ search support)
PersonApp.Page = Ember.Object.extend({
term: ''
});
When a user does a search I have a view that invokes transitionTo
PersonApp.SearchField = Ember.TextField.extend({
keyUp: function(e) {
var model = PersonApp.Page.create({term: this.get('value')});
this.get('controller.target').transitionTo('person.search', model);
}
});
Any way I can pass this "page" model to a nested view and still retain the basic "person" controller context (ie- so I can manipulate the view around this array of model objects)