binding: as-element or custom elements breaks when used in tables
Have tried to comment in closed issue but seems dead?
ViewModel
<tbody as-element="row-model" class="section-body" repeat.for="item of items" model.bind="item">
</tbody>
rowmodel.html
<template>
<require from="somerequirement"></require>
<tr click.delegate="viewDetails = !viewDetails>
<td>${model.property1}</td>
<td>${model.property2}</td>
</tr>
<tr show.bind="viewDetails">
<td>${model.detail1}</td>
<td>${model.detail2}</td>
</tr>
</template>
Currently works without require in chrome but not with, does not work at all in IE. Renders without any tr or td containers.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 19 (8 by maintainers)
@4nderss I have the same problem with
as-element
with a<tr>
, and in Chrome. Easy work around is to move therequire
inside the first child element within the inner view.Table:
Inner view
Yea missed a backtick in my earlier post which mucked up the formatting. It has been fixed now.
While I appreciate the work around, and it might work for the simple reproduction I provided, it isnt sufficient for actual uses. The reason being, most templates have bound values in there (much like ours does) and I dont know how I would accomplish that with your workaround.
In this case, it was just easier to use divs + table layout styling.
I believe that this issue should be reopened, instead of being dismissed as a user error, since this is a capability this framework lacks
@bigopon Here is a easily and small repro of this problem:
I will happily open another issue if that would be advised.
custom-table-component.html
custom-row-component.html
Both JS classes are just stubs.
The output in IE is (cleaned for readability):
As you can see the TD element are stripped from the
custom-row-component
output.HTML Output in Chrome/ FF is as expected.
You can also remove the
<require>
statements from a custom element’s template and use the@viewResources
decorator on the accompanying VM instead (assuming you have one):Aurelia documentation: http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-custom-elements/7