Я хочу создать один <table>
, в котором несколько пользовательских элементов могут иметь несколько компонентов <tr>
.
Я пытался использовать containerless
, но элемент отображался за пределами <table>
.
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<order-line repeat.for = "line of lines" line.to-view = "line" containerless></order-line>
</tbody>
</table>
И пользовательский элемент выглядит так
<template>
<tr>
<td>${line.position}</td>
<td>${line.name}</td>
</tr>
<tr if.to-view = "detailsVisible">
<td colspan = "2">${line.complicatedDescription}</td>
</tr>
</template>
Как я могу получить строку таблицы с деталями в качестве другого элемента <tr>
в одном пользовательском элементе aurelia?
🤔 А знаете ли вы, что...
С помощью Aurelia можно создавать SPA-приложения (Single Page Applications) с высокой производительностью.
Это ограничение спецификации html. Элемент <table>
не может содержать элементы, отличные от <tbody>
, <tr>
и т. д.
Вы можете использовать as-element
, чтобы обойти это ограничение:
<tr as-element = "order-line" repeat.for = "line of lines" line.to-view = "line" containerless></tr>
Это сообщает компилятору шаблона, что этот <tr>
на самом деле является настраиваемым элементом order-line
и обрабатывает его как таковой. При этом он «обманывает» браузер, заставляя его думать, что это обычная <tr>