setting to trim attributes

[yomed]

When attributes evaluate to empty or null, they aren't included, which is a great feature. But sometimes we might be dealing with attributes that have multiple values (like class). In that case, attributes might end up with trailing whitespace as we attempt to resolve which values to put there.

<div class="time "></div>
<div class="time time--selected"></div>

I was wondering what you think about introducing a setting to automatically trim these. You could do it by default, although I imagine there might be some edgecase that depends on whitespace there. Any issues with doing something like this?

[patrick-steele-idem]

Hi @yomed, the trimming would have to be done at runtime and I don't think it would be a good idea to complicate the API for the helper that renders the HTML attributes. I find it cleaner to generate the class name string in JavaScript code and pass it to the template. For example:

getTemplateData: function(input) {
    var className = ['btn'];
    if (input.primary) {
        className.push('btn-primary');
    }

    return {
        className: className.join(' ')
    };
}

Alternatively, you could use a helper module such as the following: https://www.npmjs.com/package/classnames

Thoughts?

[maberer]

Shorthand conditionals would do it as well for simple cases.

{?<expression>;<true-template>[;<false-template>]}

So something like that should work too:

div class="{?isSelected;time time-selected;time}">

[patrick-steele-idem]

That works as well @tindli, but for more complicated scenarios it's easy to introduce extra space if you aren't careful.

[yomed]

@tindli That's fine for a one-off class, although would get pretty messy when there are more than 2 possible combinations of classnames.

@patrick-steele-idem Maybe I should have posted in the marko project. That's a reasonable solution, but my example was keeping it limited to a template. Though I supposed if the template logic starts getting complex, it would be best to move it to js anyway. I had thought it might be simple to implement in marko, and then would happen automagically in the background.

[patrick-steele-idem]

The marko repo would have been more appropriate but no worries. Marko makes it easy to put a JavaScript file in front of your custom tag if the logic starts to get too unwieldy in the template. For that reason, I would rather not introduce extra overhead at runtime to trim attribute strings.

[yomed]

Ok no problem, thanks for the info.