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)

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>

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

<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.

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