मिथिल.जेएस एकाधिक सीएसएस वर्ग

Question

मैं mithril.js पर नया हूं। मेरे पास एक div है, मैं ctrl.invalid() == सत्य, और ctrl.hidden() == सच होने पर "अमान्य" वर्ग जोड़ना चाहता हूं।

यदि मैं m('div', {class: ctrl.invalid() ? 'invalid' : '', class: ctrl.hidden()? 'hidden' : ''}) का उपयोग करता हूं, तो वे एक-दूसरे को ओवरराइड करते हैं।

मैं m('div', {class: [ctrl.invalid()?'invalid':'', ctrl.focused()?'focused':''].join(' ')}) का उपयोग कर सकता हूं, और यह काम करेगा, लेकिन यह गन्दा लग रहा है।

क्या इसके लिए कोई शानदार समाधान है? धन्यवाद।

Answer 1

मैं आपको classnames का उपयोग करने की सलाह देता हूं - इसके लिए एक सरल उपयोगिता। आप अपनी कक्षाओं को एक अच्छे तरीके से परिभाषित कर सकते हैं और यह आपके लिए सबकुछ मर्ज करेगा। आपके मामले में यह होगा:

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

सुंदर ?!

Answer 2

आप अपने Mithril घटक के एक सहायक विधि जोड़ सकते हैं:

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

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

या नियंत्रक करने के लिए:

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

     return 'class3'; 
    }, 
}; 

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

चुनें जो भी बेहतर सूट अपने मामले।

तुम भी रूप में अपने जवाब में रॉस Khanas ने सुझाव दिया, classnames उपयोगिता का उपयोग कर सकते हैं:

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

या:

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

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