Использование 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
}

Вернуться на верх