Question

我有一个调用results_chart.html的视图，其中包含一个指定REST-API端点的jquery块。此端点目前硬编码如下：

var endpoint = '/api/solgeo/projects/2.json';

但是我当然想要正确的项目ID，我可以使用Django模板在{％block content％}部分访问它。即项目ID由{{project.id}}指定。如何在我的jQuery部分中访问此project.id？有问题的html模板由：

给出

{% extends 'base.html' %}

<script>
{% block jquery %}

var endpoint = '/api/solgeo/projects/2.json';  
var defaultData = []
var labels = []

$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){
        var length = data.hourlys.length
        for (i=0; i<length; i++){
            defaultData[i] = data.hourlys[i].clock_time
            labels[i] = i.toString()
        }
        setChart()
    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)
    }
})

function setChart(){
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: '# ??????',
                data: defaultData,
            }]
        }
    })
}


{% endblock %}
</script>

{% block content %}

<h3>Project id: {{ project.id }}</h3>

<div class='row'>
    <div class='col-sm-12'>
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>
</div>

{% endblock content %}

Answer 1

<script>
    {% autoescape off %}
        project_id={{ project.id }} //Keep this js variable global
    {% endautoescape %}
</script>

现在您可以将project_id变量访问为jquery。

OR

将隐藏输入添加到html / template

<input type="hidden" value="{{ project.id }}" name="project_id" id="project_id" />

将值提取到js

$("#project_id").val();

Answer 2

很抱歉打扰所有人，认为解决方案很简单。用以下代码替换示例代码的开头：

{% extends 'base.html' %}

<script>
{% block jquery %}

var projectId = '{{project.id}}'
var endpoint = '/api/solgeo/projects/'+projectId.toString() + '.json'

...代码的其余部分......

jQuery中的动态Django-REST API端点

2 个答案: