Wrong data template instance on clicking row cell with custom template

[tomhalley]

Hello, great package but sadly just hit a snag :(

I've passed a collection into my table and given one of my columns a custom template with a checkbox in. I'm using this in a CRM, so the idea is the check box should update and reflect the is_enabled value i have on the collection in the database.

So let's image I have 10 rows in my database. I've set up an event listener in my template for the click event of the checkbox, and when I click on any row except the first one, the second argument passed back from the event (the template instance) will always return my the instance of the first record.

View

<template name="admin_prints_list">
  <div class="row">
    {{> reactiveTable settings=settings}}
  </div>
</template>

<template name="admin_prints_list_published">
  <form>
    <p class="center">
      <input type="checkbox" class="filled-in checkbox" id="is_published" />
    </p>
  </form>
</template>

Template

Template.admin_prints_list.helpers({
  settings: function() {
    return {
      id: 'prints_list',
      collection: Prints.find({}),
      fields: [
        {label: 'Published', tmpl: Template.admin_prints_list_published},
        {key: 'ref', label: 'Ref'},
        {key: 'title', label: 'Title'}
      ]
    };
  }
});

Template.admin_prints_list_published.events({
  'click .checkbox'(event, template) {
    // template.data will always return first collection object regardless of which row
  }
});

In the last bit of code where it listens to the events, the template value that's returned will always return the template for the first collection object (i could see this by inspecting the data property).

If I do Template.instance() that will also return the same value

From my investigation for a solution online, maybe the correct data context is not being passed back when your table loads the library up? Really confusing

[aslagle]

I'm not sure what could cause this. It's possible something's going wrong because the first field has no key - key is required even if you're not using it. But I would expect it not to render at all if that was the problem.

I'd try adding a key, and rendering some data in the template to see if it's right before it gets to the event handler.

[tomhalley]

Adding the key didn't fix it.

Interestingly, it only ever seems to be the top row of the table. If I change the sorting, it will change the template it's getting back to be the one now sorted at the top. Perhaps my event handler isn't being limited to the template but is instead just picking the first one it finds in the DOM? But I'm definitely clicking on other rows and the callback is still being fired so that doesn't make sense either

[aslagle]

Maybe it's because all your checkboxes have the same id? id is supposed to be unique across the DOM so that might confuse something.

[tomhalley]

Good spot, but don't think that's helped. Used the ref value to generate a unique id attributes for each checkbox, but still no luck :(

[tomhalley]

Interesting, I've basically removed all of the js logic behind it, and now I have just the template and the table settings object. Still, if I click on any of the checkboxes, it will only toggle the top one, so I think that rules out any funky js with the handlers and helpers

[aslagle]

I tried putting this in one of my example apps and couldn't reproduce this problem :/

It could be browser-specific or related to something else about your app.

[tomhalley]

Please could you put a working example of this somewhere (gist or something) so I can see why my implementation is behaving differently?

[aslagle]

Here's a working example: https://gist.github.com/aslagle/dd1ea9c6bbf68a760c9da08fe65412dc

I just took your code and put it in a complete app with some fake collection data.