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/
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')
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.
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')
});
I have App.HomeRoute, which doesn't has model, but elements on this page must have their own models.
I use render helper for render these elements, but how I must to load models for they?
I'm not sure the design is correct, but you can "load" other models using setupController method in your route.
App.YourRoute = Ember.Route.extend({
setupController: function(controller, model) {
this._super(controller, model);
// set other properties
var a = this.store.find("modelA");
controller.set("a", modelA);
var b = this.store.find("modelB");
controller.set("b", modelA);
}
});
Now in your template just use them
{{each a}}
<div>{{id}}</div>
etc...
{{/each}}
I'm using ember.js 1.2 and one of my routes has a very dynamic model. When I jump into the route for the first time or when I paste in the url the model hook of the route fires, then setup controller fires and everything works as expected.
The problem occurs when I come into the route later (but not from the url directly) -this only hits the setupController hook (and the model method never fires). But technically what's changed is the url (and the parent model). And with this model, it's primarily defined from the parent (using that parent model to fetch a new set of dynamic configuration at runtime).
So how can I force the setupController to re-execute the model hook each time this specific route is loaded? (as if the model method was firing each time).
Or ... Should I fetch this dynamic model in setupController and keep the model hook logic-less by having it return an empty object?
Update
App.ChildIndexRoute = Ember.Route.extend(App.ModelMixin, {
setupController: function(controller, model) {
this._super(controller, model);
var parent = this.modelFor('parent');
return this.getForParent(parent).then(function(things) {
controller.set('model', things);
});
}
});
You can use the setupController hook instead of the model hook, it's a perfectly acceptable way to handle it.
And technically the transition is what calls the model hook and supplies it to the setupController.
Where in the chain is it not firing the model hook? Here's a simple app with a few nested resources.
http://emberjs.jsbin.com/AtebAsOS/6/edit
The key bit of code in this example is in the DogsRoute:
App.DogsRoute = Em.Route.extend({
setupController: function(controller, model){
model = Em.get(this.modelFor('cow'), 'dogs');
this._super(controller, model);
}
});
From the docs:
[The setupController] method is called with the controller for the current route and the model supplied by the model hook.
So when you override the model with the fetched dogs model and pass it to _super, the controller will use the freshly fetched model.