Question

我正在使用Flask创建一个数据分析应用程序。创建此应用程序的一部分是能够控制每页可以查看的图表数量。这涉及到在渲染HTML页面时传入不断变化的模板输入数量。有一次，一个图形可能只有一个输入变量，而下一个图形可能只有四个。如果不对其进行硬编码，我怎么能这样做呢？

除了我在python方面应该做的事情，我如何配置我的HTML模板以接受可变数量的输入？

编辑：所以我尝试了传入列表的想法。我传入的两个列表是一个html组件和文本组件的列表。以下是我的代码。这是行不通的，出于某种原因，当我运行时，我写的javascript函数会被打印出来。我正在使用plotly来生成图形，它只会回放一堆你可以坚持的HTML，而我以前必须做Markup（＆＃34;我通过plotly给出的html）但现在图形显示短语＆＃34;标记（＆＃34;正在打印。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GE Data Analytics</title>
    <link rel = "shortcut icon" type="image/png" href = "/static/general_electric.png">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/analytics_page.css">
</head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id = "header">
<div id = "title">
    <img src= "/static/GE_Logo.jpg" width="50px" height = "50px">
</div>
<div id = "titlename">
    <h1>GE Digital Mammography QC Data Analytics</h1>
</div>
</div>
<div id = "divider">
    <hr class="gradient_line"></hr>
</div>

<div id="graph">
</div>

<p></p>

<p><b> Analysis: </b> </p>
<div id = "analysis">
</div>
</body>
<script>
    function createDashboard(){
        alert("{{div|safe}}");
        alert("{{content}}");
        alert("stuff seems okay");
        graphs = "{{div|safe}}";
        summaries = "{{content}}";
        alert(graphs.length);
        alert(summaries.length);
        graph = document.getElementById('graph');
        summary = document.getElementById('analysis');
        for(var i = 0; i < graphs.length;i++){
            var div1 = document.createElement('div');
            div1.setAttribute("id","new-div");
            div1.innerHTML = graphs[i];
            graph.appendChild(div1);
            for (line in summaries[i]){
                var para = document.createElement('p');
                var node = document.createTextNode(summaries[i]);
                para.appendChild(node);
                summary.appendChild(para);
            }
        }
    }
     window.onload = function(){
        createDashboard();
    };

</script>
</html>

python render：

return render_template('analytics_page.html', div=html_list, content=summary_list)

应用程序的外观如下：

传入render_template（）的变量模板输入（Flask）

0 个答案: