Template.instance().$ and modal dialog best practices

help
1

What if I have a table with an edit button on each row. The edit btn opens a modal dialog saved in a separate template.
Each row/record of the table is in a separate template too.

Now, the best thing to avoid repeating (including) the modal on each table record template would be to put it in the parent template, but then Template.instance().$(’#modalId’).modal(‘show’) doesn’t work, because Template.instance().$ search for the ID in the current template (and the modal dialog is included in its parent template). So there are only 2 options:

  1. To include the modal code in each table record template and then using Template.instance().$
  2. To use JQuery directly $(’#modalId’).modal(‘show’)

Any other smart idea to avoid using JQuery directly?

2

Have the modal as a template and construct it from data passed to it?
Then each row’s edit button can trigger it’s own modal.

To prevent lots of empty modals on the page you’d want a reactive value that triggers rendering the modal. In which case you don’t need the jquery method, you can just flip the bit on the reactive var.

Bonus points for using _uihooks to fade the modal in and out