Использование django "include" внутри js-функции
Я делаю страницу поиска, в которой параметры отправляются по ajax, а затем после получения набора запросов я перестраиваю свои карточки. Все это дело классическое и работает нормально, вот упрощенная версия. Много строк убито или изменено, так как это не совсем по теме поста
let getobject = async (value,url) => {
var res2 = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
"X-CSRFToken": getCookie("csrftoken"),
},
body: JSON.stringify({
value: value,
})
})
let data2 = await res2.json();
videoitems.innerHTML = ''
modalbin.innerHTML = ''
data2["data"].forEach(async item => {
if (item.ext == '.mp4') {
const dynamicreation = async () => {
let dyncontent3 = await createnewcard(item)
let placing = await videoitems.appendChild(dyncontent3);
}
const nooncares2 = await dynamicreation()
} else if (item.ext == ".pdf") {
const dynamicreation2 = async () => {
let dyncontent4 = await createnewcard(item)
let placing2 = await videoitems.appendChild(dyncontent4);
}
const nooncares4 = dynamicreation2()
}
})
}
функция создания новой карты
var createnewcard = item => {
var dyncontent = document.createElement("div");
dyncontent.innerHTML =
`<div class="m-2 extralarge-modal video${item.id}">
<div data-reco="${item.id}"
class="extralarge-modal bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
<div class="p-5">
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
${item.title}
</p>
</div>
</div>
</div>`;
return dyncontent
}
Хотелось бы узнать, можно ли смешать этот js с функцией django "include" и вместо шаблона js использовать html компонент карточки, который я бы включал при циклическом просмотре полученных данных. Я также мог бы включить его внутрь js-функции createnewcard, но пока все это не удалось. Большое спасибо
Да, вы должны создать card.html или любое другое имя, которое вы можете назвать, затем вы должны просто включить в свой js, убедитесь, что вы используете те же переменные при цикле в js, например, (item)
card.html
<div class="m-2 extralarge-modal video${item.id}">
<div data-reco="${item.id}"
class="extralarge-modal bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
<div class="p-5">
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
${item.title}
</p>
</div>
</div>
</div>
и внутри вашего Js сделайте вот так
var createnewcard = item => {
var dyncontent = document.createElement("div");
dyncontent.innerHTML = {% include "card.html" %}
return dyncontent
}