在 js 函数中使用 django "include"

Question

我正在做一个搜索页面，其中参数由 ajax 发送，然后在收到查询集后重建我的卡片。整件事情都很经典而且工作正常，这是事情的简化版本。许多行被删除或修改，因为它不是 post

的真正主题

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 组件在收到的数据中循环。我也可以将它包含在 createnewcard js 函数中，但到目前为止，它都失败得很惨。非常感谢

Answer 1

是的，你必须创建 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
}

在 js 函数中使用 django "include"

use django "include" inside a js function

django

ajax