Array notifications are applied wrong after inserting and removing a row

[warpech]

Steps to reproduce:

1. Click on "Insert a row"
2. Click on "Update first row"
3. Click on "Remove first row"
4. Click on "Update first row"

The last 3 rows are updated with a new price. Only one row (the first row) should be updated.

See:

[miyconst]

@tomalec could you please take a look?

[tomalec]

Shorted test case:

1. Click on "Update first row"
2. Click on "Remove first row"
3. Click on "Update first row"

[tomalec]

It is index .0 vs key #0 mismatch, probably due to the fact that we are re-stamping all the rows at https://github.com/Juicy/juicy-table-repeat/blob/gh-pages/juicy-table-repeat.html#L77 in case of remove/insert of just one.

[tomalec]

It seems we are facing all the problems that are solved by Polymer's dom-repeat so we would probably need to move most of its logic to here.

@warpech, @miyconst WDYT about forking (and making a PR of) dom-repeat and implementing what was proposed at Polymer/polymer#3448?

[edit: I have removed my proposition as it was simply wrong]

For me injecting one more template to the dom-repeat seems easier that replicating its behavior. Also to replicate dom-repeat logic, we would need to go through and understand entire code anyway.

[tomalec]

Or maybe we should just ask people to fallback to:

<juicy-table>
<template is="dom-repeat">
</template>
</juicy-table>

na make juicy-element do nothing more than just extending HTMLTableElement ?

[warpech]

<juicy-table>
<template is="dom-repeat">
</template>
</juicy-table>

If it works, I'd love it!

[miyconst]

@tomalec am I right that you want to stamp <tr>s with native Polymer's dom-repeat and them move them into <table>?

Well, if that would work, I am all for it.

P.S. Any solution which works in IE to generate table rows is good for me, even if it requires a bit more code or another <template>.

[warpech]

I wonder if you can get this to work:

<juicy-table class="table"><!-- "table" is a Bootstrap class -->
  <thead>
    <tr>
      <template is="dom-repeat" items="{{Headers}}"><!-- my column headers -->
        <th>{{item.Label}}</th>
      </template>
    </tr>
  </thead>
  <tbody>
    <template is="dom-repeat" items="{{People}}"><!-- my rows -->
      <tr><td>{{item.FirstName}}</td><td>{{item.LastName}}</td></tr>
    </template>
  </tbody>
</juicy-table>

See source of Bootstrap .table

[tomalec]

@warpech

If it works, I'd love it!

It works but you loose user agent styles

See https://jsbin.com/coxere/edit?html,output

---

@miyconst

am I right that you want to stamp s with native Polymer's dom-repeat and them move them into

?
Not really. Anyway I need to review my proposition in Polymer's issue as it seems not to solve the problem.

[miyconst]

@warpech as far as I remember it won't work. IE removes every node from <tbody> and <table> which is not <tr> and puts it after the element.

So, it will be equal to:

<juicy-table class="table"><!-- "table" is a Bootstrap class -->
  <thead>
    <tr>
    </tr>
  </thead>
  <template is="dom-repeat" items="{{Headers}}"><!-- my column headers -->
    <th>{{item.Label}}</th>
  </template>
  <tbody>
  </tbody>
  <template is="dom-repeat" items="{{People}}"><!-- my rows -->
    <tr><td>{{item.FirstName}}</td><td>{{item.LastName}}</td></tr>
  </template>
</juicy-table>

Does not seem to work even in Chrome - https://jsfiddle.net/qc5qv5e5/.

[tomalec]

For that we will need juicy-tr, juicy-thead,...

[miyconst]

@tomalec your solution does not seem to work in IE: