Всем привет! Я использую webpack для сборки в проектах, но скорее всего это не имеет отношения к вопросу.
У меня есть вот такой код
$('input[name="orderType"]').on('change', function(){
let orderType;
switch(this.value){
case '1':
orderType = new addOrderTypeOne;
break;
case '2':
orderType = new addOrderTypeSecond;
break;
case '3':
orderType = new addOrderTypeThree;
break;
}
$('.container').html(orderType.renderContent())
});
который в зависимости от выбранного radioButton переключателя вызывает класс, в каждом из которых есть метод renderContent. В этом методе очень много HTML кода который приходится писать вот так (на самом деле кода гораздо больше):
renderContent(){
return $('<div class="orderStatus orderStatus_1">' +
' <div class="row mt-4">' +
' <div class="col flex-shrink-1 flex-grow-1">' +
' <label class="attach">' +
' <button type="button" class="btn btn-primary uploadFile">Прикрепить изображение' +
' <input type="file" name="mages[]" multiple="" accept="image/jpeg,image/png,image/bmp">' +
' </button>' +
' <div class="fileNames"></div>' +
' </label>' +
' </div>' +
' </div>' +
'</div>' +
'<div class="row mt-4">' +
' <h5 class="noSelect mb-4"' +
' id="moreInfoCollapsible"' +
' data-bs-toggle="collapse"' +
' data-bs-target="#moreInfoOrder"><i class="icon-down"></i> Дополнительная информация</h5>' +
'</div>')
}
Очень неудобно писать код в JS файле. Подскажите может есть какой-то способ делать это в html или каких-то template файлах и потом импортировать его внутрь return $();?
