javascript - 带有ajax的django模板上的CSS元素

Question

使用下面的 Django 模板来渲染带有 CSS 样式的词典:

<div id="div_unkown_txt">
{% for k, v in unkown.items %}
    <div>
    <span class='personal_word'>{{k}}</span> : {{v.2}}
    </div>
    <div class='dt'>{{v.1}}</div>
    <div>{{v.0|safe}}</div> 
{% endfor %}
</div>

我还需要用 ajax 回调更新 div，所以我写了类似的函数 unkown_html():

function unkown_html(k, v){
    return "<div><span class='personal_word'>" + k + "</span> : " + v[2] + "</div>" +
           "<div class='dt'>" + v[1] + "</div>" +
           "<div>" + v[0] + "</div>";
}
function repeat_word(w){
    $.ajax({
        type: "POST",
        url: '../word_repeat',
        data:{w:w}, 
        success: function(data){
            var txt='';
            $.each(data, function(k, v){ 
                txt += unkown_html(k,v);
            });
            $("#div_unkown_txt").html(txt);
        }
    });
}

这两个函数是一样的，因为ajax更适合热插拔渲染我想知道如何在模板渲染中调用unkown_html()？

Answer 1

不幸的是，您的问题有点难以理解。我认为您问的是在响应 Ajax 调用而重新呈现页面的一部分时如何减少模板代码和 Javascript 之间的重复。

我通常处理这个问题的方法是让 Ajax 调用本身返回呈现的 HTML，而不是 JSON。因此，您将该模板片段提取到它自己的文件中，您将其 {% include %} 放入普通模板中，但直接从 Ajax View 调用。然后 Javascript 只需将接收到的 HTML 插入到页面中，而不是从头开始重新呈现任何内容。