在js函数中使用django“include”

igsr9ssn  于 2023-05-23  发布在  Go
关注(0)|答案(1)|浏览(135)

我正在做一个搜索页面,其中参数 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()
        }
    })
}

createnewcard函数

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组件,我会在循环数据时包含它。我也可以将它包含在createnewcard js函数中,但到目前为止,这一切都失败得很惨。多谢了

cx6n0qe3

cx6n0qe31#

是的,你必须创建**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>

在你的J里面这样做

var createnewcard = item => {
    var dyncontent =  document.createElement("div");
    dyncontent.innerHTML = `{% include "card.html" %}`
    return dyncontent
}

相关问题