使用 ember-bootstrap 使行可点击
Make a row clickable with ember-bootstrap
这是我的 hbs 代码示例。
<div class="table-responsive">
<table class="table table-striped">
<thead>
<th>#Id</th>
<th>{{t 'firstname'}}</th>
<th>{{t 'lastname'}}</th>
<th>{{t 'email'}}</th>
<th>{{t 'username'}}</th>
</thead>
<tbody>
{{#each users as |user|}}
<tr>
<td>
{{#link-to 'profile' user.id}}
{{user.id}}
{{/link-to}}
</td>
<td>
{{#link-to 'profile' user.id}}
{{user.firstname}}
{{/link-to}}
</td>
<td>
{{#link-to 'profile' user.id}}
{{user.lastname}}
{{/link-to}}
</td>
<td>
{{#link-to 'profile' user.id}}
{{user.email}}
{{/link-to}}
</td>
<td>
{{#link-to 'profile' user.id}}
{{user.username}}
{{/link-to}}
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
如您所见,此面板的每个元素 link 都具有相同的配置文件,但我想知道是否有办法使 整个 行可点击,不是每个元素。
这意味着我想在每个 {{user.*}} 之间点击,而不仅仅是点击它们,将我发送到个人资料。我已经搜索过了,但找不到 bootstrap 和车把的答案。
感谢您的宝贵时间!
您可以将 {{link-to}} 助手设置为如下所示的行元素。
{{#link-to "profile" user.id tagName = "tr"}}
<td>
<a>
{{user. firstname}}
</a>
</td>
<td>
<a>
{{user. email}}
</a>
</td>
....
{{/link-to}}
这是我的 hbs 代码示例。
<div class="table-responsive">
<table class="table table-striped">
<thead>
<th>#Id</th>
<th>{{t 'firstname'}}</th>
<th>{{t 'lastname'}}</th>
<th>{{t 'email'}}</th>
<th>{{t 'username'}}</th>
</thead>
<tbody>
{{#each users as |user|}}
<tr>
<td>
{{#link-to 'profile' user.id}}
{{user.id}}
{{/link-to}}
</td>
<td>
{{#link-to 'profile' user.id}}
{{user.firstname}}
{{/link-to}}
</td>
<td>
{{#link-to 'profile' user.id}}
{{user.lastname}}
{{/link-to}}
</td>
<td>
{{#link-to 'profile' user.id}}
{{user.email}}
{{/link-to}}
</td>
<td>
{{#link-to 'profile' user.id}}
{{user.username}}
{{/link-to}}
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
如您所见,此面板的每个元素 link 都具有相同的配置文件,但我想知道是否有办法使 整个 行可点击,不是每个元素。
这意味着我想在每个 {{user.*}} 之间点击,而不仅仅是点击它们,将我发送到个人资料。我已经搜索过了,但找不到 bootstrap 和车把的答案。
感谢您的宝贵时间!
您可以将 {{link-to}} 助手设置为如下所示的行元素。
{{#link-to "profile" user.id tagName = "tr"}}
<td>
<a>
{{user. firstname}}
</a>
</td>
<td>
<a>
{{user. email}}
</a>
</td>
....
{{/link-to}}