I am just learning emberjs and have been given a barebones task.
I have a table of users displayed from my model. To the side of the table, I have an area where it will display details of a selected user. Thus:
ID FNAME LNAME | DETAIL: User 2
1 Andy Ashford | First: Betty
2 Betty Beckett | Last: Beckett
| Phone: 222-222-2222
I've got the LEFT side working, but not the RIGHT side.
(I'm using Mirage to load data. I could not seem to get http-mocks to work).
Two questions:
-
Should I
- route this directly within script or
- should I use the path? i.e. When just the users table is displayed, my path is /users/, but when I click on user 1, I could set the path to /user/1, then do all my logic from there.
-
With either method, how do I deliver the specific user data to the user-detail component? How do I point the model at the view?
Here is my Mirage/config.js (don't know why Mirage keeps data in a config file, but...)
this.get('/users', function() {
return {
data: [{
type: 'users',
id: 1,
attributes: {
fname: 'Andy',
lname: 'Ashford',
phone: '111-111-1111',
}
}, {
type: 'users',
id: 2,
attributes: {
fname: 'Betty',
lname: 'Beckett',
phone: '222-222-2222',
}
}]
};
});
My models/user.js just looks like this:
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
export default Model.extend({
fname: attr(),
lname: attr(),
phone: attr()
});
My main templates/components/user-list.hbs (this is working - table on left, though detail on right has no data):
<table class="with-detail"><tr>
<td class="table-overview">
<table class="user-table">
<tr>
<td> </td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td class="table-detail">
<!-- Show all data of user X -->
<!---->
</td>
</tr>
</table>
My templates/components/user-detail.hbs (I can see the labels in the detail, so I'm calling the template, but no data):
First name: //these don't work of course
Last name:
Phone:
This is what I've been trying to do with the router.js:
Router.map(function() {
this.route('users', {
path: 'users',
});
this.route('user', {
path: 'user/:id'
});
});
And for good measure, there are additionally some routes. routes/users.js:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('user');
}
});
routes/user.js:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.query('user', { id: 1 });
}
});
(and why so many route files?)
If I hit user/1 directly, I see nothing - no table, no detail (presumably because /users/ and its model have gone away).
I'm sort of stumped.
