New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

template tag doesn't work in tbody #3

Closed
hobbit125 opened this Issue Jun 1, 2015 · 31 comments

Comments

Projects
None yet
@hobbit125

hobbit125 commented Jun 1, 2015

In IE, if you attempt to place a template tag directly within a tbody tag, it appears to be ignored.

Use case: Want all grandchildren of a collection to be shown in rows:

<table>
  <tbody>
    <template repeat.for="grp in data.rowGroups">
      <tr repeat.for="row in grp.Rows">
          <td>Test</td>
      </tr>
    </template>
  </tbody>
</table>

@EisenbergEffect EisenbergEffect added the bug label Jun 1, 2015

@EisenbergEffect

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jun 1, 2015

Member

Doubtful we will be able to fix this, due to the way IE handles tables. We may be able to provide a comment-style workaround. Placing the repeat on the tr should be fine, but it's the presence of the template element inside the tbody that causes IE to strip it out before we can even read it.

Member

EisenbergEffect commented Jun 1, 2015

Doubtful we will be able to fix this, due to the way IE handles tables. We may be able to provide a comment-style workaround. Placing the repeat on the tr should be fine, but it's the presence of the template element inside the tbody that causes IE to strip it out before we can even read it.

@Ixonal

This comment has been minimized.

Show comment
Hide comment
@Ixonal

Ixonal Nov 18, 2015

Just wanted to poke here, as I'm starting to run into this now. I'm wanting to add two rows for every item in a list inside of a table. Ex:

<table>
  <tbody>
    <template repeat.for="row of rows">
       <tr></tr>
       <tr></tr>
    </template>
  </tbody>
</table>

I can't really think of an alternate way to do this properly... I could put the repeat on the tbody, but that's not really right. Has there been any progress on the comment-style workaround? I'm assuming it'd be like comment bindings in Knockout. I found them helpful in various other circumstances as well, so they might be a nice generic addition.

Edit: I suppose one option for me could be to create a custom attribute similar to repeat.for, but that only repeats the inner html content, and leaves the containing element as-is. Kind of like how Knockout's foreach binding works. That way, I could just put it directly on the tbody.

Ixonal commented Nov 18, 2015

Just wanted to poke here, as I'm starting to run into this now. I'm wanting to add two rows for every item in a list inside of a table. Ex:

<table>
  <tbody>
    <template repeat.for="row of rows">
       <tr></tr>
       <tr></tr>
    </template>
  </tbody>
</table>

I can't really think of an alternate way to do this properly... I could put the repeat on the tbody, but that's not really right. Has there been any progress on the comment-style workaround? I'm assuming it'd be like comment bindings in Knockout. I found them helpful in various other circumstances as well, so they might be a nice generic addition.

Edit: I suppose one option for me could be to create a custom attribute similar to repeat.for, but that only repeats the inner html content, and leaves the containing element as-is. Kind of like how Knockout's foreach binding works. That way, I could just put it directly on the tbody.

@gavinaiken

This comment has been minimized.

Show comment
Hide comment
@gavinaiken

gavinaiken Jan 12, 2016

Anyone know what the status of this issue is?

gavinaiken commented Jan 12, 2016

Anyone know what the status of this issue is?

@EisenbergEffect

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jan 12, 2016

Member

It's not possible to make this work without native template support. It's literally impossible. However, we are considering some workarounds, such as potentially attributing elements with template-start and template-end. Perhaps like this:

<table>
  <tbody>
       <tr repeat.for="row of rows" template-start></tr>
       <tr template-end></tr>
  </tbody>
</table>

^^^Something like that. What do you think?

Member

EisenbergEffect commented Jan 12, 2016

It's not possible to make this work without native template support. It's literally impossible. However, we are considering some workarounds, such as potentially attributing elements with template-start and template-end. Perhaps like this:

<table>
  <tbody>
       <tr repeat.for="row of rows" template-start></tr>
       <tr template-end></tr>
  </tbody>
</table>

^^^Something like that. What do you think?

@Ixonal

This comment has been minimized.

Show comment
Hide comment
@Ixonal

Ixonal Jan 12, 2016

Feels kind of odd... Maybe just because it's new or something.

Is the alternate repeat attribute i was contemplating not workable? I kind of gave up on it because I got told not to use Aurellia :(

Ixonal commented Jan 12, 2016

Feels kind of odd... Maybe just because it's new or something.

Is the alternate repeat attribute i was contemplating not workable? I kind of gave up on it because I got told not to use Aurellia :(

@hobbit125

This comment has been minimized.

Show comment
Hide comment
@hobbit125

hobbit125 Jan 13, 2016

I think the workaround suggested is fine. It's a corner case and there's no normal way to handle it.

hobbit125 commented Jan 13, 2016

I think the workaround suggested is fine. It's a corner case and there's no normal way to handle it.

@Ixonal

This comment has been minimized.

Show comment
Hide comment
@Ixonal

Ixonal Jan 13, 2016

True.

Would those attributes have an effect on other binding constructs, or be limited to just repeats?

Ixonal commented Jan 13, 2016

True.

Would those attributes have an effect on other binding constructs, or be limited to just repeats?

@Mordred

This comment has been minimized.

Show comment
Hide comment
@Mordred

Mordred Jan 13, 2016

Based on http://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table I end up with this:

<table>
  <tbody repeat.for="row of rows">
       <tr>1. line</tr>
       <tr>2. line</tr>
  </tbody>
</table>

Mordred commented Jan 13, 2016

Based on http://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table I end up with this:

<table>
  <tbody repeat.for="row of rows">
       <tr>1. line</tr>
       <tr>2. line</tr>
  </tbody>
</table>
@EisenbergEffect

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jan 13, 2016

Member

@Ixonal The ideas is that the repeat-start, etc would affect all template controller attributes: repeat, if, with, etc. and any user defined behaviors as well.

Member

EisenbergEffect commented Jan 13, 2016

@Ixonal The ideas is that the repeat-start, etc would affect all template controller attributes: repeat, if, with, etc. and any user defined behaviors as well.

@EisenbergEffect

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jan 13, 2016

Member

@Mordred Cool! I didn't know that was possible. Very nice.

Member

EisenbergEffect commented Jan 13, 2016

@Mordred Cool! I didn't know that was possible. Very nice.

@Ixonal

This comment has been minimized.

Show comment
Hide comment
@Ixonal

Ixonal Jan 13, 2016

@EisenbergEffect still feels a bit wonky to me, but if it works, it works.

@Mordred yeah, it's possible to do that, but the generated markup wouldn't really match the intent, and may cause issues with css frameworks. If those aren't relevant concerns, though, go for it :)

Ixonal commented Jan 13, 2016

@EisenbergEffect still feels a bit wonky to me, but if it works, it works.

@Mordred yeah, it's possible to do that, but the generated markup wouldn't really match the intent, and may cause issues with css frameworks. If those aren't relevant concerns, though, go for it :)

@EisenbergEffect

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jan 13, 2016

Member

@Ixonal Do you have any alternate ideas? We are open to suggestions.

Member

EisenbergEffect commented Jan 13, 2016

@Ixonal Do you have any alternate ideas? We are open to suggestions.

@Ixonal

This comment has been minimized.

Show comment
Hide comment
@Ixonal

Ixonal Jan 13, 2016

@EisenbergEffect think i read the markup wrong the first time. Thought the repeat was on the table body. Having it on the row is a little better. Might let the attributes have an optional value to specify a sort of id to make it more obvious where a particular template starts and stops. My initial thought was that the repeat binding could be altered to give the option to only repeat its children, but you know better than me whether or not that's possible. Something like repeat.in="foo of bar" or repeat.for="foo in bar" to determine that the template should be composed of children only.

Ixonal commented Jan 13, 2016

@EisenbergEffect think i read the markup wrong the first time. Thought the repeat was on the table body. Having it on the row is a little better. Might let the attributes have an optional value to specify a sort of id to make it more obvious where a particular template starts and stops. My initial thought was that the repeat binding could be altered to give the option to only repeat its children, but you know better than me whether or not that's possible. Something like repeat.in="foo of bar" or repeat.for="foo in bar" to determine that the template should be composed of children only.

@EisenbergEffect

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jan 13, 2016

Member

I think I would favor the template-start and template-end a bit more because we could bake that into the compiler and then enable the same thing to work with no only the repeat but also, if with, etc. automatically.

Member

EisenbergEffect commented Jan 13, 2016

I think I would favor the template-start and template-end a bit more because we could bake that into the compiler and then enable the same thing to work with no only the repeat but also, if with, etc. automatically.

@Ixonal

This comment has been minimized.

Show comment
Hide comment
@Ixonal

Ixonal Jan 13, 2016

Would that replace what the template tag does for those other cases, or would there just be two ways to have containerless control statements now?

Ixonal commented Jan 13, 2016

Would that replace what the template tag does for those other cases, or would there just be two ways to have containerless control statements now?

@EisenbergEffect

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jan 13, 2016

Member

It would basically be an alternative to the template element and could handle all containerless control scenarios.

Member

EisenbergEffect commented Jan 13, 2016

It would basically be an alternative to the template element and could handle all containerless control scenarios.

@Ixonal

This comment has been minimized.

Show comment
Hide comment
@Ixonal

Ixonal Jan 13, 2016

Sounds alright to me, then.

Ixonal commented Jan 13, 2016

Sounds alright to me, then.

@gavinaiken

This comment has been minimized.

Show comment
Hide comment
@gavinaiken

gavinaiken Jan 15, 2016

Would be great to have a work-around that would work with all the other templating keywords also, so I like the template-start / template-end idea for that reason.

gavinaiken commented Jan 15, 2016

Would be great to have a work-around that would work with all the other templating keywords also, so I like the template-start / template-end idea for that reason.

@smithaitufe

This comment has been minimized.

Show comment
Hide comment
@smithaitufe

smithaitufe Mar 5, 2016

I had issue working tables today. I realized it is using template inside the table tag that caused my rows from been rendered. I think the template-start and template-end is better. Does it mean when we want to use nested component built with TR, we will not longer need to use template?

smithaitufe commented Mar 5, 2016

I had issue working tables today. I realized it is using template inside the table tag that caused my rows from been rendered. I think the template-start and template-end is better. Does it mean when we want to use nested component built with TR, we will not longer need to use template?

@jdanyow

This comment has been minimized.

Show comment
Hide comment
@jdanyow

jdanyow Apr 15, 2016

Member

@EisenbergEffect can this be transitioned to an enhancment for the template-start / template-end feature?

Member

jdanyow commented Apr 15, 2016

@EisenbergEffect can this be transitioned to an enhancment for the template-start / template-end feature?

@EisenbergEffect EisenbergEffect added enhancement and removed bug labels Apr 15, 2016

@HenryKeen

This comment has been minimized.

Show comment
Hide comment
@HenryKeen

HenryKeen Oct 21, 2016

Massive thanks for the template-start / template-end workarounds @EisenbergEffect, they work a treat!

I've run into a stumbling block though, have you got any idea how I could replicate a nested repeat like this?

<tr>
    <template repeat.for="item1 of items1">
        <template repeat.for="item2 of items2">
            <td></td>
        </template>
    </template>
</tr>

HenryKeen commented Oct 21, 2016

Massive thanks for the template-start / template-end workarounds @EisenbergEffect, they work a treat!

I've run into a stumbling block though, have you got any idea how I could replicate a nested repeat like this?

<tr>
    <template repeat.for="item1 of items1">
        <template repeat.for="item2 of items2">
            <td></td>
        </template>
    </template>
</tr>
@nano2nd

This comment has been minimized.

Show comment
Hide comment
@nano2nd

nano2nd Feb 9, 2017

Was template-start / template-end workaround ever added?

nano2nd commented Feb 9, 2017

Was template-start / template-end workaround ever added?

@davismj

This comment has been minimized.

Show comment
Hide comment
@davismj

davismj Feb 11, 2017

Member

I mean, I don't think we need it. Rob proposed this above:

<table>
  <tbody>
       <tr repeat.for="row of rows" template-start>row 1</tr>
       <tr template-end>row 2</tr>
  </tbody>
</table>

You can achieve this with the following:

<table>
  <tbody>
    <template repeat.for="row of rows" containerless>
       <tr>row 1</tr>
       <tr>row 2</tr>
    </template>
  </tbody>
</table>
Member

davismj commented Feb 11, 2017

I mean, I don't think we need it. Rob proposed this above:

<table>
  <tbody>
       <tr repeat.for="row of rows" template-start>row 1</tr>
       <tr template-end>row 2</tr>
  </tbody>
</table>

You can achieve this with the following:

<table>
  <tbody>
    <template repeat.for="row of rows" containerless>
       <tr>row 1</tr>
       <tr>row 2</tr>
    </template>
  </tbody>
</table>
@jdanyow

This comment has been minimized.

Show comment
Hide comment
@jdanyow

jdanyow Feb 11, 2017

Member

@davismj I think the template-start/end workaround is for IE.

IE doesn't have true template element support so it mangles the markup when you try to use template within a table.

Member

jdanyow commented Feb 11, 2017

@davismj I think the template-start/end workaround is for IE.

IE doesn't have true template element support so it mangles the markup when you try to use template within a table.

@nano2nd

This comment has been minimized.

Show comment
Hide comment
@nano2nd

nano2nd Feb 11, 2017

Thanks @davismj this works in Chrome, but my issue is specifically with tables in IE11 where my bindings are breaking down even with "containerless". I have yet to get code in this form to work in IE11...

<table>
  <tbody>
    <template repeat.for="row of rows" containerless>
      <tr if.bind="bool_expr">${row.SomeVal}</tr>
    </template>
  </tbody>
</table>

nano2nd commented Feb 11, 2017

Thanks @davismj this works in Chrome, but my issue is specifically with tables in IE11 where my bindings are breaking down even with "containerless". I have yet to get code in this form to work in IE11...

<table>
  <tbody>
    <template repeat.for="row of rows" containerless>
      <tr if.bind="bool_expr">${row.SomeVal}</tr>
    </template>
  </tbody>
</table>
@nano2nd

This comment has been minimized.

Show comment
Hide comment
@nano2nd

nano2nd Feb 11, 2017

oops we posted at the same time..is there no known workaround besides the repeating <tbody> implementation?

nano2nd commented Feb 11, 2017

oops we posted at the same time..is there no known workaround besides the repeating <tbody> implementation?

@lancegiles

This comment has been minimized.

Show comment
Hide comment
@lancegiles

lancegiles Jun 12, 2017

I've just had a developer mention this issue to me for IE and the only work around he found is putting the template on the tbody (which I don't like since it messes up some of our css attributes when highlighting odd/even rows). But we have to do what we have to do.

Was the template-start / template-end ever designed? I'd like to see if that resolves the issue.

lancegiles commented Jun 12, 2017

I've just had a developer mention this issue to me for IE and the only work around he found is putting the template on the tbody (which I don't like since it messes up some of our css attributes when highlighting odd/even rows). But we have to do what we have to do.

Was the template-start / template-end ever designed? I'd like to see if that resolves the issue.

@timfish

This comment has been minimized.

Show comment
Hide comment
@timfish

timfish Jul 5, 2017

I can't have multiple <tbody> as I wanted to set max-height on it and have it scroll all the rows. I ended up having to change to flex layout rather than table!

timfish commented Jul 5, 2017

I can't have multiple <tbody> as I wanted to set max-height on it and have it scroll all the rows. I ended up having to change to flex layout rather than table!

@jamesond

This comment has been minimized.

Show comment
Hide comment
@jamesond

jamesond Jul 21, 2017

Any one come up with a work around on this? Besides repeating tbody, seems pretty hacky.

jamesond commented Jul 21, 2017

Any one come up with a work around on this? Besides repeating tbody, seems pretty hacky.

@gavinaiken

This comment has been minimized.

Show comment
Hide comment
@gavinaiken

gavinaiken Jul 24, 2017

Repeating tbody or using flexbox were the only work arounds we came up with in our project.

gavinaiken commented Jul 24, 2017

Repeating tbody or using flexbox were the only work arounds we came up with in our project.

@EisenbergEffect

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect
Member

EisenbergEffect commented Oct 2, 2017

Issue moved to aurelia/templating #565 via ZenHub

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment