灰烬模型-制作物品表请点击详细 [英] ember model -making a table of items click for detail
问题描述
我正在学习emberjs，并得到了一个准系统任务。
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.
（我正在使用 Mirage 加载数据。我似乎无法获得 http-mocks 工作）。
(I'm using Mirage to load data. I could not seem to get http-mocks to work).
两个问题：
-
我应该
Should I
- 直接在脚本中路由此路径，或者
- 我应该使用路径吗？即，仅显示用户表时，我的路径是/ users /，但是当我单击用户1时，我可以将路径设置为/ user / 1，然后从那里开始所有逻辑。
使用任何一种方法，如何将特定的用户数据传递到用户详细信息组件？如何将模型指向视图？
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?
这是我的 Mirage / config.js （不知道为什么Mirage将数据保存在配置文件中，但是...）
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',
}
}]
};
});
我的 models / user.js 看起来像这样：
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
export default Model.extend({
fname: attr(),
lname: attr(),
phone: attr()
});
我的主要 templates / components / user-list.hbs （这是工作-左侧的表格，尽管右侧的详细信息没有数据）：
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">
{{#each users as |user|}}
<tr>
<td>{{user.id}} </td>
<td>{{user.fname}}</td>
<td>{{user.lname}}</td>
</tr>
{{/each}}
</table>
</td>
<td class="table-detail">
<!-- Show all data of user X -->
<!--{{user-detail}}-->
</td>
</tr>
</table>
我的 templates / components / user-detail.hbs （我可以看到标签中的详细信息，因此我称其为模板，但没有数据）：
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: {{user.fname}} //these don't work of course
Last name: {{user.lname}}
Phone: {{user.phone}}
这就是我一直在尝试使用 router.js ：
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'
});
});
从好的角度来说，还有一些路线。
routes / users.js ：
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?)
如果我直接击中user / 1，我什么也看不到-没有表，没有细节（大概是因为/ users /及其模型已经消失了）。
If I hit user/1 directly, I see nothing - no table, no detail (presumably because /users/ and its model have gone away).
I
推荐答案
由于您的问题有点笼统，我为另一个SO问题创建了此解决方案，但它应该可以很好地说明我相信您想要的东西。
As your question is a bit general, I've created this solution for a different SO question, but it should serve as a good demonstration of what I believe you want.
看看这个旋转，请告诉我这是否是您的初衷。
Have a look at this twiddle, and let me know if this is what you had in mind.
此应用程序的相应路由结构为
The corresponding routing structure for this app is
Router.map(function() {
this.route('games', function(){
this.route('game', { path: '/game/:language_id' }, function(){
this.route('comments')
})
})
因此，您会在左侧看到游戏列表，然后单击一个游戏，在右侧看到它的详细信息，并加载了评论。
So you'll see a list of games on the left and on clicking one, a detail of it on the right, with comments loaded.
这篇关于灰烬模型-制作物品表请点击详细的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
