Question

为什么在渲染模板部分时无法应用css文件？

我已经研究过render page with model after ajax post ，现在我知道我可以将部分html文件返回到特定的html中的特定div

我的问题，例如：

有2个html文件名我想将 children.html 填入 father.html ，对我来说还可以！但为什么 children.html 中的标签无法应用css（在 father.css上设置）

father.html 有自己的外部文件 father.css 和 father.js

对于father.html：

<html>
<head>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/father.css') }}">
    <script src="{{ url_for('static', filename='js/father.js') }}"></script>
</head>
<body>
    <div id="container">
        <!-- @@@ children.html here!! Using AJAX @@@ -->
    </div>
</body>
</html>

对于father.js

$.ajax({
    url: '/returnChildrenTemplate',
    success: function(data) {
        $('#container').html(data); // return template into container
    }
})

对于father.css

canvas {
    width: 100px;
    height: 100px;
}

对于children.html：

<table>
{% for r in data %}
<tr>
    <td> {{ r.id }} </td>
    <td> 
        <canvas class="demo" style="background-color: {{r.color }} "></canvas>
    </td>
</tr>
{% endfor %}
</table>

对于后端烧瓶脚本：

@app.router('/returnChildrenTemplate')
def returnChildrenTemplate():
    result = ... # query from Database
    return render_template('children.html', data=result)

它不适用于children.html，其canvas标签仍然是原始大小。

如果我将画布样式设置为 children.html ，它会起作用。（这很愚蠢）

<head>
    <style>
        canvas {
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<table>
...
((  the same as above ))
...
</table>

这是什么问题？有什么方法可以解决这个问题吗？

BTW，father.js有同样的问题。

渲染部分模板不使用ajax（烧瓶后端）应用css

0 个答案: