我正在做一個搜索頁面，其中引數由 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“包含”函式混合使用，而不是使用 js 模板 litterals，而是使用卡片的 html 組件，我將在回圈接收的資料時包含該組件。我也可以將它包含在 createnewcard js 函式中，但到目前為止，這一切都失敗了。非常感謝
uj5u.com熱心網友回復：
是的，你必須創建card.html或任何你可以命名的東西，然后你必須包含在你的 js 中，確保你在 js 中回圈時使用相同的變數，例如。（item）
卡片.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
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/464958.html
下一篇：優化ajax代碼，不重復自己