I have several (simple) models like languages, departments etc. They only contains name and id properties (columns). I want to make a controller and view, which controls the CRUD functions. How should i approach this problem to have one controller for several models?
Is it possible to load models from a routing variable?
pseudo code
somecontroller/modelname
App.IndexRoute = Ember.Route.extend({
model: function(modelname) {
return this.get('store').find(modelname);
}
});
You can load multiple models from the model hook and assign them to controller properties. e.g.
App.IndexRoute = Ember.Route.extend({
model: function(modelname) {
var store = this.get('store');
return Ember.RSVP.hash({
foos: store.find('foos'),
bars: store.find('bars')
});
},
setupController: function(controller, model) {
controller.set('foos', model.foos);
controller.set('bars', model.bars);
}
});
Ember.RSVP.hash will return a promise that waits on the promise values of all properties of the passed object, and will then fulfill with an object with the same property names and the promise fulfillment results as values.
By overriding setupController, you can determine what properties are set on the controller and with what values.
Here is two ways that you can do it to get two models on a route
/*
* Use the model hook to return model, then
* setController to set another model
*/
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('languages');
},
setupController: function(controller, model) {
this._super(controller, model);
controller.set('department', this.store.findAll('department'));
}
});
/*
* Can return a Hash of promises from the model hook
* and then use those as your models
*/
App.RsvphashRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
langs: this.store.find('languages1'),
dept: this.store.find('department1')
});
}
});
Here is jsbin of them in action. Hope it helps:
http://emberjs.jsbin.com/basoneno/1/edit
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')
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')
});
In my current Ember setup, I retrieve a store for the Index Route. This works fine.
App.IndexRoute = Ember.Route.extend({
model: function(){
var store = this.store.find('index');
return store;
}
});
However, I wish to create a custom form object for the same route, and therefore following the advice of this SO answertried to return two models for the Index Route like this, however, I now get the error
Error while processing route: index that is not defined ReferenceError: that is not defined
New Code
App.IndexRoute = Ember.Route.extend({
model: function(){
return Ember.RSVP.hash({
store: this.store.find('index'),
customform: App.CustomForm.create()
});
}
});
How can I add a second model to this route?
Update
The index model had a date property that I was using to sort the items in the index model
App.IndexController = Ember.ArrayController.extend({
sortProperties: ['date'],
sortAscending: false,
I was originally displaying the index model with this in the html
{{#each item in arrangedContent}}
<li> {{some-component id=item.customid date=item.date data=item.junk}} </li>
{{/each}}
By adding the second model, whether or not i use the store to create a record, I get this error and the data from the store doesn't load in the html
Error while processing route: index undefined is not a function TypeError: undefined is not a function
Also, I don't actually need to persist the second model I'm trying to add, so I don't desire to make it a store. In the SO answer I linked to, second models were added that weren't persisted.
It looks like you should be using the store to create your new custom form record:
App.IndexRoute = Ember.Route.extend({
model: function(){
return Ember.RSVP.hash({
store: this.store.find('index'),
customform: this.store.createRecord('customForm')
});
}
});
You're going to want to create your customForm through your store:
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
store: this.store.find('index'),
customForm: this.store.createRecord('customForm')
});
}
});
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 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/