如何让JavaScript识别上下文对象视图.py在Djang

Question

我从一位前同事那里接手了一个Django项目，我必须编辑他的代码，在googleviz折线图中添加一条线。你知道吗

既然折线图已经存在，我就尽可能地遵循创建它的逻辑（因为我以前从来没有做过这样的事情）。我将新的数据模型添加到models.py，成功地迁移了它，并找到了views.py中他为折线图和它下面的表设置数据的部分。你知道吗

我试图复制他在views.py中所做的操作，然后代码似乎从实际创建图表的JavaScript文件中获得。然而，当我使用JavaScript时，它似乎从views.py中识别出了他的对象，但根据我在Web控制台日志中看到的内容，它没有识别出我的对象。你知道吗

他在views.py中创建的关键对象是module_progressjs。包含新行数据的对象称为tii_progressjs。在我看来，名为context_dict的a dictionary是用来将数据从Python传递到JavaScript的，但我复制了这种方法，它似乎不起作用。你知道吗

这里是views.py代码的核心。与单词“module”相关的所有内容都是原始（工作）代码，而与“tii”或“turn it in”相关的所有内容都是我添加的部分。有些代码块可能与表相关，而不是与图表相关，但我还不确定，因此我遵循了所有代码块的逻辑，尽管我只编辑图表：

try:
    module_attempts = Studentmoduleprogress.objects.values().filter(Person_bnrid = Person_bnrid).annotate(Max('Start_date')).order_by('-Start_date')
    turn_it_in = TII.objects.values().filter(Person_bnr_id = Person_bnrid).annotate(Max('Course_start')).order_by('-Course_start')
    context_dict['turn_it_in'] = turn_it_in
    context_dict['module_attempts'] = module_attempts
    tiiavg = TII.objects.values('COURSE_IDENTIFICATION','Course_start').annotate(wk1_avg=Avg('TurnItIn_W01'), wk2_avg=Avg('TurnItIn_W02'),
                                                                                        wk3_avg=Avg('TurnItIn_W03'),wk4_avg=Avg('TurnItIn_W04'),
                                                                                        wk5_avg=Avg('TurnItIn_W05'),wk6_avg=Avg('TurnItIn_W06'),
                                                                                        wk7_avg=Avg('TurnItIn_W07'),wk8_avg=Avg('TurnItIn_W08'),
                                                                                        wk9_avg=Avg('TurnItIn_W09'),wk10_avg=Avg('TurnItIn_W10'),
                                                                                        wk11_avg=Avg('TurnItIn_W11'),wk12_avg=Avg('TurnItIn_W12'))

    modavg = Studentmoduleprogress.objects.values('Module_code','Start_date').annotate(wk1_avg=Avg('Week_01'), wk2_avg=Avg('Week_02'),
                                                                                        wk3_avg=Avg('Week_03'),wk4_avg=Avg('Week_04'),
                                                                                        wk5_avg=Avg('Week_05'),wk6_avg=Avg('Week_06'),
                                                                                        wk7_avg=Avg('Week_07'),wk8_avg=Avg('Week_08'),
                                                                                        wk9_avg=Avg('Week_09'),wk10_avg=Avg('Week_10'),
                                                                                        wk11_avg=Avg('Week_11'),wk12_avg=Avg('Week_12'))

    #print modavg
    context_dict['tiiavg'] = mark_safe(json.dumps(list(tiiavg), cls = DateTimeEncoder))
    context_dict['modavg'] = mark_safe(json.dumps(list(modavg), cls = DateTimeEncoder))
    module_progress = []
    for module in module_attempts:
        max_week = module['Module_duration_max']
        progress_lst = ['Module_code', module['Module_code'], 'Start_date', module['Start_date'], 'End_date', module['End_date']]
        for wk in range(1, max_week + 1):
            week = 'Week_' + (str(wk) if wk >= 10 else '0' + str(wk))
            progress_lst.append(week)
            progress_lst.append(module[week])
        module_progress.append(progress_lst)

    tii_progress = []
    for module in turn_it_in:
        max_week = module['Module_duration_max']
        progress_lst = ['COURSE_IDENTIFICATION', module['COURSE_IDENTIFICATION'], 'Course_start', module['Course_start'], 'Course_end', module['Course_end']]
        for wk in range(1, max_week + 1):
            week = 'TurnItIn_W' + (str(wk) if wk >= 10 else '0' + str(wk))
            progress_lst.append(week)
            progress_lst.append(module[week])
        tii_progress.append(progress_lst)

    #print module_progress
    context_dict['tii_progress'] = tii_progress
    context_dict['module_progress'] = module_progress
    context_dict['module_progressjs'] = mark_safe(json.dumps(module_progress, cls = DateTimeEncoder))
    context_dict['tii_progressjs'] = mark_safe(json.dumps(tii_progress, cls = DateTimeEncoder))

JS如下所示。为了简洁起见，我删掉了前95%的内容，但如果您想查看完整的脚本，请查看编辑历史：

   // Module Progress
    google.charts.setOnLoadCallback(drawModProgress);

    $(window).resize(function(){
        //google.charts.setOnLoadCallback(drawModProgress);
        drawModProgress();
    });


    function drawModProgress() {

        var data = new google.visualization.DataTable();
        var selOption  = $("#mcode option:selected").val();
        var dateOption  = $("#sdate option:selected").val();
        var modset = {};
        var selModule = [];
        var selTII= [];
        var wks = [];
        var posts = [];
        var yTicks = [];
        var l=0, m=0;    
        var tii = [];


        for(i=0; i < module_progressjs.length; i++)
        {
            if(module_progressjs[i][1] == selOption)
            //if (modset.Module_code == selOption && modset.Start_date == dateOption)
            {

                selModule[0]= module_progressjs[i];
                //console.log(selModule[0]);

           }        
        }
       //console.log(tii_progressjs[1]);
       //console.log(tii_progressjs);
        /*for(ii=0; ii < tii_progressjs.length; ii++)
        {
            if(tii_progressjs[ii][1] == selOption)
            {

                selTII[0]= tii_progressjs[ii];
           }        
        }*/

如果我取消对引用tii_progressjs对象的代码的注释，那么代码将中断。当我查看日志时，他的对象有数据，但我的对象不在那里。你知道吗

不确定这是否重要，但HTML是：

{% if module_progress %}

<div class="row">
    <div class="col-lg-12 col-md-12">
    <h3 class="sp-font-bl"> <i class="fa fa-book sp-icon-module" aria-hidden="true"></i> Modules Progression</h3>

        <div class="panel panel-default">
            <div class="panel-body">
                <label id="sp-modsel">Module Code</label>
                <select id="mcode" class="selectpicker" >   
                    {% for mod in module_attempts %} 

                        <option value="{{ mod.Module_code }}"> {{ mod.Module_code }} </option>

                    {% endfor %}    

                </select>


                <div class="container-fluid ">
                    <div class="row" > 
                        <div class="col-xs-12 col-md-12">                         
                            <div id="module_progress" ></div>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    {% if module_attempts %}                    
                      <table id="modules" class="table table-striped table-bordered table-hover">
                        <thead align="center">
                            <tr class="sp-td-bg01">
                                <th>Module Code</th>  
                                <th>Module Name</th>      
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Module Grade</th>
                            </tr>
                        </thead>
                        <tbody>                     
                            {% for module in module_attempts %}
                              <tr>
                                <td scope="row"> {{module.Module_code}} </td>
                                <td> {{module.Module_name}} </td>
                                <td> {{module.Start_date}} </td>
                                <td> {{module.End_date}} </td>
                                <td> {{module.Module_grade}} </td>
                              </tr>
                            {% endfor %}                      
                        </tbody>
                      </table>
                    {% endif %}               
                </div>          

更新：我开始认为缺少的链接是HTML。这听起来像是JS中的document.getelementbyid语句从htmldom中提取信息，而我没有向HTML添加任何内容。你知道吗

更新2:看看HTML模板末尾的这一点，我打赌我应该编辑以下内容：

<script type="text/javascript"> 
var studtests = {{ studtests | safe }};
var studobjs =  {{ studobjs | safe }};
//var modulesjs =  {{ modulesjs | safe }};
var studsumryjs = {{ studsumryjs | safe }};
var module_progressjs = {{ module_progressjs | safe }};
var modavg = {{ modavg | safe }};
</script>

<script src = "{%static 'js/student.js' %}" type="text/javascript"> 
</script>
{% endblock %} 

Answer 1

答案似乎不是直接从views.py到JS，而是从views.py到HTML模板，然后在调用脚本时将数据传递给JS。你知道吗

具体来说，我必须更改HTML中的以下代码块：

<script type="text/javascript"> 
var studtests = {{ studtests | safe }};
var studobjs =  {{ studobjs | safe }};
var studsumryjs = {{ studsumryjs | safe }};
var module_progressjs = {{ module_progressjs | safe }};
var modavg = {{ modavg | safe }};
</script>

<script src = "{%static 'js/student.js' %}" type="text/javascript"> 
</script>

至

<script type="text/javascript"> 
var studtests = {{ studtests | safe }};
var studobjs =  {{ studobjs | safe }};
var studsumryjs = {{ studsumryjs | safe }};
var module_progressjs = {{ module_progressjs | safe }};
var modavg = {{ modavg | safe }};
var tiiavg = {{ tiiavg | safe }};
var tii_progressjs = {{tii_progressjs | safe}};
</script>

<script src = "{%static 'js/student.js' %}" type="text/javascript"> 
</script>

然后我可以对JS进行必要的更改，以便在图表中包含我想要的额外行。你知道吗