Flask渲染模板呈现注意到

时间:2017-04-26 11:25:36

标签: python html flask

问候

我有一个烧瓶应用程序:

    @app.route('/test')
    def test():
        return render_template('index.html')

在index.html中我有:

    <!DOCTYPE html>
    <meta charset="utf-8">
    <style type="text/css">

        .node {
        cursor: pointer;
      }

      .overlay{
          background-color: #e6d1ee;
      }

      .node circle {
        fill: #fff;
        stroke: #4d4bb4;
        stroke-width: 2px;
      }

      .node text {
        font-size:10px;
        font-family:sans-serif;
      }

      .link {
        fill: none;
        stroke: #7acc7e;
        stroke-width: 2px;
      }

      .templink {
        fill: none;
        stroke: #ff8285;
        stroke-width: 3px;
      }

      .ghostCircle.show{
          display:block;
      }

      .ghostCircle, .activeDrag .ghostCircle{
           display: none;
      }

    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="MyTree.js"></script>
    <body>
        <div id="tree-container"></div>
    </body>

当我在浏览器中运行此html代码时,它显示了一个很好的graph

但是后来我使用带有render_template的烧瓶渲染它,它显示了绝对的注意

我该如何解决?

很抱歉这个巨大的代码块,我不确定这是否是html问题

UPD:

实际上是的,问题出在静态的东西上。现在我的浏览器可以获取js文件。但另一个问题出现了。在MyTree.js我正在使用

    treeJSON = d3.json("{{ url_for('static', filename='dota.json') }}", function(error, treeData)

并且dota.json未在浏览器中加载。但它与MyTree.js在同一个目录中,在静态目录中。

1 个答案:

答案 0 :(得分:2)

我想说,目前您的MyTree.js文件未被浏览器提取(您可以在开发者控制台中查看)。您需要将MyTree.js文件放在静态目录中,并在HTML中引用静态端点:

<script src="{{ url_for('static', filename='MyTree.js') }}"></script>