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')
});
}
});
Related
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 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
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?
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
}
});