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.
Related
I am beginner to ember.
I want to send data from route to component.
import Ember from 'ember';
var model = null;
export default Ember.Route.extend({
model() {
return true;
}
});
i have defined this model in route now i want to use this model in component js file. i have just do console log but it gives undefined.
my component js code is below
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement() {
console.log(model);
}
});
So can anyone suggest what is the actual way to use data of route in component.
You just return the data you need to pass it to template,
import Ember from 'ember';
export default Ember.Route.extend({
model() {
//here return model data which requires to display template
return true;
}
});
Inside template you can access is using model, in this case you just sent true so your model will contains true.
You need to pass this model to component so that you can access it from component.
Inside template.hbs,
{{my-component model=model }}
You can access model property in component,
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement() {
console.log('Model ',this.get('model'));
}
});
Welcome to Ember. I am strongly encouraging you to read ember guides and play with ember-twiddle
You need to pass the data to component from template; that is from route's template you need to pass whatever you want (i.e. model) to corresponding model. See the following twiddle for a simple demonstration.
In this example; index route returns a json object (an object with name & surname fields) from the model hook. What is returned from this model hook is passed to my-component inside index.hbs template file as object property. Then you can access the corresponding data within component's js and hbs files easily. In the example; data is shown within my-component.hbs template file. Hope it is clear.
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.
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')
});
}
});
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?