Toggle: Using the attributeName in the template

I’m trying to add use the unique attributeName for my Toggle in the custom template (to link the label to the input) but I can’t seem to find any way to access it within the template.

var toggleTemplate = '<div class="be-checkbox">' +
    '<input id="toggle_{{attributeName}}" type="checkbox" class="{{cssClasses.checkbox}}" value="{{name}}" {{#isRefined}}checked{{/isRefined}}>' +
    '<label for="toggle_{{attributeName}}">{{name}} <span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span></label>' +
    '</div>';
search.addWidget(
    toggle({
        container: document.querySelector('#type-dinner-container'),
        attributeName: 'type_dinner',
        label: 'Dinner',
        autoHideContainer: false,
        templates: {
            item: toggleTemplate
        }
    })
);

Required: unique identifier for this element, using the label isn’t ideal since it can include special characters and spaces.

A (not ideal) solution

I can use transformData to do some less than ideal magic to achieve a similar result (excluding special characters in this case)

transformData: function (item)
{
    item.attributeName = item.name.replace(/ /g,"_").toLowerCase();
    return item;
},

However since I have 12 toggles, adding this to every toggle widget object statement is not ideal as you can imagine…

Perhaps the attributeName should be passed into the render method?

[bobylito]

I’ve added the feedback to put the product team in the loop. I’m closing the issue for now.

[Haroenv]

I’ll leave this open for now because I can see the value