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.

See plunkr

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 19 (8 by maintainers)

Links to this issue

Aurelia: How do I inject a component template in existing html? - Stack Overflow

Most upvoted comments

@4nderss I have the same problem with as-element with a <tr>, and in Chrome. Easy work around is to move the require inside the first child element within the inner view.

Table:

<tr as-element="tr-view" cells.bind="whatever"></tr>

Inner view

<!-- tr-view -->
<template>
  <td repeat.for="cell of cells">
    <require from="../utils/value-formatter"></require>
    <!-- ... -->
  </td>
</template>

robharper on Sep 30, 2016

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

ggayowsky on Sep 17, 2020

@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

<template>
  <require from="./custom-row-component"></require>
  <table class="table">
    <thead>
      <tr>
        <th>Header A</th>
        <th>Header B</th>
        <th>Header C</th>
      </tr>
    </thead>
    <tbody>
      <tr as-element="custom-row-component"
        repeat.for="row of fileTableRows"
      ></tr>
    </tbody>
  </table>
</template>

custom-row-component.html

<template>
  <td>
    A
  </td>
  <td>
    B
  </td>
  <td>
    C
  </td>
</template>

Both JS classes are just stubs.

The output in IE is (cleaned for readability):

<table class="table">
  <thead>
	<tr>
	  <th>Header A</th>
	  <th>Header B</th>
	  <th>Header C</th>
	</tr>
  </thead>
  <tbody>
    <!-- Weird solution to dynamically compose repeatable row: https://github.com/aurelia/binding/issues/556#issuecomment-269352204 -->
    <tr class="au-target" au-target-id="1702" as-element="custom-row-component">
      A B C
    </tr>
    <tr class="au-target" au-target-id="1702" as-element="custom-row-component">
      A B C
    </tr>
    <tr class="au-target" au-target-id="1702" as-element="custom-row-component">
      A B C
    </tr>
    <tr class="au-target" au-target-id="1702" as-element="custom-row-component">
      A B C
    </tr>
    <tr class="au-target" au-target-id="1702" as-element="custom-row-component">
      A B C
    </tr>><!--anchor-->
  </tbody>
</table>

As you can see the TD element are stripped from the custom-row-component output.

HTML Output in Chrome/ FF is as expected.

ggayowsky on Sep 17, 2020

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):

import {viewResources} from 'aurelia-framework';

@viewResources('./path/to/something', './path/to/another/thing')
export class XyzCustomElement{
...
}

Aurelia documentation: http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-custom-elements/7

erilot on Mar 2, 2017