Mithril.js multiple css class

Question

Sono nuovo su mithril.js. Ho un div, voglio aggiungere la classe "invalid" se ctrl.invalid() == true, e "hidden" se ctrl.hidden() == true.

Se utilizzo m('div', {class: ctrl.invalid() ? 'invalid' : '', class: ctrl.hidden()? 'hidden' : ''}), si annullano a vicenda.

Posso usare m('div', {class: [ctrl.invalid()?'invalid':'', ctrl.focused()?'focused':''].join(' ')}) e funzionerà, ma sembra disordinato.

Esiste una soluzione elegante per questo? Grazie.

Answer 1

Vi consiglio di utilizzare classnames - una semplice utilità per questo. Puoi definire le tue classi in un modo carino e unire tutto per te. Nel tuo caso sarà:

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

Bello ?!

Answer 2

È possibile aggiungere un metodo di supporto per il componente Mithril:

const myComponent = { 
    css() { 
     // Add some logic 

     return 'class1 class2'; 
    }, 
    view() { 
     return m('div', { class: this.css() }); 
    }, 
}; 

O al controller:

const ctrl = { 
    css() { 
     // Add some logic 

     return 'class3'; 
    }, 
}; 

const myComponent = { 
    view() { 
     return m('div', { class: ctrl.css() }); 
    }, 
}; 

scegliere quale si adatta al vostro caso meglio.

È inoltre possibile utilizzare l'utilità classnames, come suggerito da Ross Khanas nella sua risposta:

const myComponent = { 
    css() { 
     return classNames({ 
      invalid: ctrl.invalid(), 
      focused: ctrl.focused(), 
     }); 
    }, 
    view() { 
     return m('div', { class: this.css() }); 
    }, 
}; 

Oppure:

const ctrl = { 
    css() { 
     return classNames({ 
      invalid: this.invalid(), 
      focused: this.focused(), 
     }); 
    }, 
    invalid() { /* ... */ }, 
    focused() { /* ... */ }, 
}; 

const myComponent = { 
    view() { 
     return m('div', { class: ctrl.css() }); 
    }, 
};