mithril.js

Mithril.js multiple css class

I'm new at mithril.js. I have a div, I want to add class "invalid" if ctrl.invalid()==true, and "hidden" if ctrl.hidden()==true.

If I use m('div', {class: ctrl.invalid() ? 'invalid' : '', class: ctrl.hidden()? 'hidden' : ''}), they override each other.

I can use m('div', {class: [ctrl.invalid()?'invalid':'', ctrl.focused()?'focused':''].join(' ')}), and it'll work, but it looks messy.

Is there an elegant solution for this? Thanks.

Solution

  • I recommend you to use classnames - a simple utility for that. You can define your classes in a nice way and it will merge everything for you. In your case it will be:

    const myMergedClasses = classNames({
    invalid: ctrl.invalid(), 
    focused: ctrl.focused()
});
m('div', { class: myMergedClasses })

    Beautiful?!