如何在JavaScript innerHTML中添加Django模板代码

Question

我正试图为我的Django项目添加一个搜索功能，但我在知道如何在Javascript Innerbox中编写Django模板时遇到了问题。

我有一个项目模型如下：

class Item(models.Model):
title = models.CharField(max_length=100)
image = models.ImageField(blank=False, upload_to=upload_design_to)
price = models.DecimalField(decimal_places=2, max_digits=100)
discount_price = models.DecimalField(decimal_places=2, max_digits=100, blank=True, null=True)
timestamp = models.DateTimeField(default=timezone.now)

项目列表视图如下：

class ItemListView(ListView):
model = Item
paginate_by = 12
template_name = "store/product_list.html"
ordering = ['-timestamp']
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["qs_json"] = json.dumps(list(Item.objects.values()),cls=DjangoJSONEncoder)
return context

我有以下脚本：

<script>
const data = '{{qs_json}}'
const rdata = JSON.parse(data.replace(/&quot;/g, '"'))
console.log(rdata)
const input = document.getElementById('search_here')
console.log(input)
let filteredArr = []
input.addEventListener('keyup', (e)=>{
box.innerHTML = ""
filteredArr = rdata.filter(store=> store['title'].includes(e.target.value))
console.log(filteredArr)
if (filteredArr.length > 0){
filteredArr.map(store=>{
box.innerHTML += `<b>${store['title']}</b><br>` <------------------------------- Replace
})
} else {
box.innerHTML = "<b>No results found...</b>"
}
})
</script>

我正在尝试用替换innerHTML<b>${store['title']}</b><br>

<div class="col-4 mb-3">
<div class="card h-100">
<a href="{{item.get_absolute_url}}">
<embed src="{{ item.image.url }}" class="card-img-top" alt="..."/>
</a>
<div class="card-body">
<h5 class="card-title">{{ item.title }}</h5>
<p class="card-text">
{% if item.description %}
{{ item.description }}
{% endif %}
</p>
</div>
<div class="card-footer">
<small class="text-muted">{{ item.timestamp }}</small>
</div>
</div>
</div>

但结果是，没有显示损坏的图像，也没有反映项目信息

我的问题是如何显示与每个项目相关的信息

Answer 1

此解决方案要简单得多：

result_html = loader.render_to_string(
'template_name.html', {'object_list': object_list}
)
data = {
'result_html': result_html,
}
return JsonResponse(data)