Pass dynamic data attribute to content block in Meteor

Question

I have a dynamic template for buttons in Blaze, looks like this (simplified):

button.html

<template name="Button">
  <button {{attributes}}>
    <span class="button__text">{{> UI.contentBlock}}</span>
  </button>
</template>

button.js

import {Template} from 'meteor/templating';
import cx from 'classnames';

import './button.html';

Template.Button.helpers({
  attributes() {
    const instance = Template.instance();
    let {data} = instance;

    return {
      disabled: data.disabled,
      'class': cx('button', data.class)
    };
  }
});

Attempt to set dynamic data attribute:

{{#Button class="js-add-contact" data-phase-index={{index}}}}Add Contact{{/Button}}

This insertion of index (let's assume it's just a simple, dynamic string) into data-phase-index throws an error: the content block was not expecting the {{. I am unsure of another way to get that dynamic data into the template. There's also the issue of getting the data- attributes recognized by Button in the attributes() helper. Can anyone clear this up?

Answer 1

Simply data-phase-index=index should work.

Since you are already within double curly braces for your Button template call, Meteor knows it will get interpreted values. For example, see that you have to use quotes around your string in class="js-add-contact".

As usual, Meteor will try to interpret index from a helper, or from data context.