Thank you in advance. I have a model and a controller. What I am trying is to access the model data from my controller and be able to play with from my controller. When init: function is fetch, on my console i get (null).Thank you again
//========model==========\\
App.RequestDashboardRoute = App.AuthRoute.extend({
model: function(){
return this.store.find('request');
}
});
//========controller==========\\
App.RequestDashboardController = Ember.Controller.extend({
init: function(){
console.log("model");
}
});
console.log("model"); is only going to log you a string "model"
Also, the model is not set in the controller until after setupController is called in the route (RequestDashboardRoute in your case)
init happens before setupController, to be sure you controller not only has a model before trying to access it but also to execute your logic again if it changes, you can add an observer, and run your logic there
App.RequestDashboardController = Ember.Controller.extend({
modelChanged: function(){
var model = this.get('model');
// your model is ready
}.observes('model')
});
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')
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/
With the new async router and Ember Data, setupController will only be called once the model has loaded since the model hook will call App.Foo.find(id) which is a promise (http://emberjs.com/guides/routing/asynchronous-routing/).
But is there a way to not only wait for the model itself to load, but its relationships as well?
I have route where the model has "childs". I need both the model and childs to be loaded before the transition can continue.
How about using afterModel?
App.FooRoute = Ember.Route.extend({
model: function() {
// get your data
},
afterModel: function(model) {
// this is fired after your models are loaded.
// you can access the model too.
}
});
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?
I have a nested route structure like this:
App.Router.map(function() {
this.resource('user', {path: '/user/:user_id'}, function() {
this.route('followers', {path: '/followers'});
});
});
when I hit the user/123/followers route I would expect that it automatically fetch the model from user/123/followers, but it just fetches the user model from user/123 again. What do I need to add so it fetches the right data for the route?
Each route have your own model, and this isn't propaged, by default.
So App.UserRoute model, returns the current model like expected:
App.User.find(params.user_id)
But because App.UserFollowersRoute have your own model hook, then you have to provided it.
You can do this easily using the modelFor.
App.UserFollowersRoute = Ember.Route.extend({
model: function() {
return this.modelFor('user');
}
});
The modelFor look for a model from a named route. So modelFor('user'), will retrieve the model from App.UserRoute.
And in your user/followers template, you will have the current user, in the current context:
<script type="text/x-handlebars" data-template-name="user/followers">
<h2>{{name}} followers:</h2>
<ul>
{{#each followers}}
<li>{{name}}</li>
{{/each}}
</ul>
</script>
Here a sample with this working
Ember will automatically call User.find(123) when you hit /user/123/... because that is the default model hook for App.UserRoute. If you want to fetch additional data when the followers route is accessed, define a model hook for App.UserFollowersRoute:
App.UserFollowersRoute = Ember.Route.extend({
model: function() {
user = this.controllerFor('user');
// Now find and return the list of followers
}
});