The example code below is how the model hook is supposed to work by default. Strangely, if I don't include the model hook at all, the model is populated correctly. If I include the model hook as below, it doesn't work because "params" is an empty object. However, this.paramsFor('somemodel') returns {somemodel_id: "1"} So, what am I missing here?
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
return this.store.find('somemodel', params.somemodel_id);
}
});
Nested routes inherit the parent route's model if you do not specify a model hook. If all you are doing is looking up the model to edit you don't need a model hook, if you are querying the store for something else and need access to somemodel you can access it via this._super(...arguments).
export default Ember.Route.extend({
model: function(params) {
return this.store.find('somemodel', this._super(...arguments).get('id'));
}
});
It seems that params don't propagate to nested routes. My router looks like this:
this.route('somemodel', { path: '/somemodels/:somemodel_id' }, function() {
this.route('edit');
});
The "index" route is implied and is the route that receives the params. The edit route is nested and does not receive the params.
Related
I was wondering what the correct way to access the model from the controller?
I noticed that in the init of the controller the model is still null
#controller.js
init(){
console.log(this.model); // IS NULL
}
But the setupController method has the populated model. Therefore currently I am calling a controller's method from the setupController and an passing the model over there. Is this fine?
I was thinking there would be a callback method in the controller which would automatically be called when the controller is setup.
route.js
model() {
return this.store.findAll("post");
},
setupController(controller, model){
controller.set('model', model);
}
This will give console log model which is collection of post object.
controller.js
init(){
console.log(this.model);
}
We do this most of the times especially if you use RSVP promise
you chose what will be the model on your controller.
Example
model(params) {
return Ember.RSVP.hash({
lecture: this.store.findRecord('section', params.section_id).then((section)=>{
return this.store.createRecord('lecture',{
section: section
});
}),
section:this.store.findRecord('section', params.section_id),
course: this.store.query('course',{filter:{section_id:params.section_id}})
});
},
setupController(controller,model){
controller.set('model', model.lecture);
controller.set('section', model.section);
controller.set('course', model.course);
}
Note if you only have just simple model on route
model(params) {
return this.store.findRecord('course', params.course_id);
}
and you don`t have to do any setup on controller which is possible this will also give you model on controller.
setupController hook method will set model as property to controller.
setupController(controller,model){
this._super(...arguments);
}
You can get model just like normal other properties in controller. this.get('model')
Is there a better way of doing this?
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params){
//there must be a better way to do this!
return this.store.find('edition',{
server_id: parseInt(params.edition_id)
}).then(function(e){
return e.get('firstObject')
});
}
});
I want to find the model from the store using a query, and so I end up with an array rather than just a model...
Many thanks.
I'm doing a basic example for ajax operation in ember 1.7.0, What I did is have a model in route and did a ajax get for raw data.
App.IndexRoute=Em.Route.extend({
model:function(){
return Em.$.get('data.json');
},
}
Now in controller I want to modify this for the template, I tried
App.IndexController = Ember.Controller.extend({
init:function(){this._super();
var newmodel=this.get('content');
....some modification...
this.set('model',newmodel);
}
}
but this is not working.
So how basically One modify the model? This should be in setupController or in controller?
if need be how to get and set model in controller? Another confusion is on when to create and when to extend the controller and route?
Thanks.
Go for setupController hook in your route
App.IndexRoute = Em.Route.extend({
model: function() {
return Em.$.get('data.json');
},
setupController: function(controller, model) {
this._super(controller, model);
//Some modifications
//..
//end of modificaitons
controller.set('model', model);
}
});
extend() is used to create subclass for any class, for instance, Ember.ArrayController. If you want to overwrite the properties (methods) of the existing class you can go with extend.
create() is used to create new instance of a class. Refer this http://emberjs.com/guides/object-model/classes-and-instances/
No need to use setupController hook of Route until you want to set any properties for the controller.
If your Route have model hook and return data, then you can access model directly in your controller by using
var model = this.get('model');
At the same time you can use setters to update/modify model.
this.set('model',newdata);
Have a look at simple bin http://jsbin.com/fesux/edit
Kindly have a look at Ember.set and Ember.get also
You can utilize a setupController to handle this
App.IndexRoute=Em.Route.extend({
model:function(){
return Em.$.get('data.json');
},
setupController: function(controller, model){
controller.set('model',model);
}
}
The setupController hook receives the route handler's associated controller as its first argument. In this case, the IndexRoute's setupController receives the application's instance of App.IndexController.
The default setupController hook sets the model property of the associated controller to the route handler's model.
If you want to configure a controller other than the controller associated with the route handler, use the controllerFor method.
More details here:
http://emberjs.com/guides/routing/setting-up-a-controller/
What is the use of serialize hook in ember route class?
App.PostRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('post', params.post_id);
},
serialize: function(post) {
return { post_id: post.get('id') };
}
});
Ember Documentation says:
If your dynamic segment ends in _id, the default model hook will convert the first part into a model class on the application's namespace (post becomes App.Post). It will then call find on that class with the value of the dynamic segment.
The default serialize hook will pull the dynamic segment with the id property of the model object.
But i am not able to understand the use of serialize hook in route class
The serialize method determines what to use as parameter for the provided entity.
Example.
Say you have the following user model, with the following properties.
id
username
email
Now if you have a list of users, and you want to link to a show user details page, you might use a loop like this.
{{#each users}}
{{#link-to user.show this }} {{username}} {{/link-to}}
{{/each}}
So when Ember sees this link-to helper i will convert it to a link, which might look like this
elvar
Now the default behavior here is to use the id as a parameter, which is what your own example shows, i picks the id from the model. We can change this with the serializer method.
Lets say that instead of using the id, we want to use the username as a parameter.
App.UserShowRoute= Ember.Route.extend({
model: function(params) {
return this.store.find('user', params.user);
},
serialize: function(user) {
return { user: user.get('username') };
}
});
Now the link-to helper will yield the following instead.
elvar
The example will represent it best, I suppose. So, I have a defined route with a model property, which displays the appropriate image, based on id in url. This worked:
App.DetailsRoute = Ember.Route.extend({
model: function(params) {
return App.Images.find(params.image_id);
}
});
However, I wanted to add an action and... when I set up the controller, the page did not have access to the model part. Controller:
App.DetailsController = Ember.Controller.extend({
saveToServer: function(){
//alert(JSON.stringify());
alert('hi');
}
});
So at this time it's like this: either the model is set and stuff gets displayed and controller doesn't work OR controller works and model not.
Why is this happening?