javascript - Django:在模板内编写 JavaScript 与加载它

Question

我正在使用 JavaScript 添加评论而不刷新页面。当我在模板内使用 JavaScript 时，它工作得很好，但如果我将 JavaScript 写入文件并加载模板内的文件，那么它不会显示撰写评论的人的姓名(它会显示评论)美好的)。下面是我在模板中使用的 JavaScript:

function create_comment(event,div_id,form_id,commentinsert_id) {
    event.preventDefault();
    var text_id = '#'.concat(div_id,' ','#comment-text')
    var slug_id = '#'.concat(div_id,' ','#post_slug')
    var appenddiv_id = '#'.concat(div_id)
    comment_count ++;
    var divcommentinsert_id = 'inserted_comment-'.concat(comment_count.toString())
    $.ajax({
        url : "create_comment/", // the endpoint
        type : "POST", // http method
        data : { text : $(text_id).val(), post_slug: $(slug_id).val(),},
        // handle a successful response
        success : function(json) {
            div.innerHTML = `
                <div id = `+divcommentinsert_id+` class="card-footer">
                <div class="row">
                <div>
                <img src="{{user.profile.profile_picture.url}}" alt="" width="40" height="40">
                </div>
                <div class="col-md-8">
                <b style="color:rgb(240, 0, 0);"> {{user.first_name}} {{user.last_name}}</b>
                <br>
                `+json.text+`
                <a onClick="edit_comment('`+json.slug+`','`+divcommentinsert_id+`','`+json.text+`')"><i class="fa fa-edit"></i></a>
                <a onClick="delete_comment('`+json.slug+`','`+divcommentinsert_id+`')"><i class="fa fa-trash-o"></i></a>
                </div>
                </div>
                </div>`;
            document.getElementById(commentinsert_id).appendChild(div);
            document.getElementById(form_id).reset();
        },
        // handle a non-successful response
        error : function(xhr,errmsg,err) {
            $('#results').html("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: "+errmsg+
                " <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
            console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
        }
    });
};

上面代码中<b style="color:rgb(240, 0, 0);"> {{user.first_name}} {{user.last_name}}</b>用于显示名称。它显示添加评论的人的姓名，但是当我将相同的函数复制到 comments.js 文件并加载像 <script src="{% static 'scripts/comments.js' %}"></script> 这样的文件时那么它不会显示名称，而是显示 {{user.first_name}} {{user.last_name}}。我在几个页面中使用这个 javascript，我认为最好写入文件并加载文件，而不是在每个页面中编写相同的脚本。有人可以帮我解决这个问题吗？

Answer 1

{{ dictionary.key }}等在模板中是如何在 django 模板引擎中使用变量的。

静态 javascript 文件不是模板。它不由 django 模板引擎处理。

将您需要的值放入 html 中(通过模板引擎)，从 JS 访问它们。

基本思想:

• 创建一个 JS 变量(例如: <script>var user_full_name = "{{ user.user_name }} {{ user.last_name }}"</script> )，使用 user_full_name在 ajax 成功回调中。

• 将值放入某个 html 元素中(例如: <input type="hidden" id="user_name" value="{{ user.user_name }}"> )并使用 JS/jQuery $("#user_name").val() 获取它.

编辑:将缺失的结束双引号添加到 user_full_name声明。