Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/python/320.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Python 如何在jinja2中构建可重用的小部件?_Python_Flask_Jinja2 - Fatal编程技术网

Python 如何在jinja2中构建可重用的小部件?

Python 如何在jinja2中构建可重用的小部件?,python,flask,jinja2,Python,Flask,Jinja2,我想定义一个小部件,大致如下: {% block css %} .mywidget { css: goes_here; {% endblock %} {% block widget %} <div class="mywidget"> <!-- structure goes here --> </div> {% endblock %} {% block script %} $( ".mywidget" ).addFunctionality(s

我想定义一个小部件,大致如下:

{% block css %}
.mywidget {
     css: goes_here;
{% endblock %}

{% block widget %}
<div class="mywidget">
   <!-- structure goes here -->
</div>
{% endblock %}

{% block script %}
$( ".mywidget" ).addFunctionality(stuff)
{% endblock %}
{%block-css%}
.mywidget{
css:goes_在这里;
{%endblock%}
{%block-widget%}
{%endblock%}
{%block script%}
$(“.mywidget”).addFunctionality(stuff)
{%endblock%}
换句话说,小部件需要什么样的CSS,它的内容是什么(最好以某种方式参数化),以及它在文件末尾需要什么样的脚本。然后,我希望能够扩展一个布局模板,将小部件添加到主体(可能是同一类型的多个小部件,具有不同的参数),并将CSS和javascript正确添加到布局模板的顶部和底部,每个小部件类型添加一次


这似乎是一个非常简洁明了的设计,从本机UI设计的角度来看,我很困惑,为什么我找不到任何这样做的例子。

您已经充实了小部件系统设计的一部分,但实际上只展示了如何设计小部件。另一部分这就是你最终在Jinja中使用小部件的方式

例如,您可以使用来定义小部件。创建一个文件“mywidget.html”并使用

{% macro css() -%}
    .mywidget {
         css: goes_here;
    }
{% endmacro %}

{% macro widget() -%}
    <div class="mywidget">
        <!-- structure goes here -->
    </div>
{% endmacro %}

{% macro script() -%}
    $( ".mywidget" ).addFunctionality(stuff)
{% endmacro %}
{%macro css()-%}
.mywidget{
css:goes_在这里;
}
{%endmacro%}
{%macro小部件()-%}
{%endmacro%}
{%宏脚本()-%}
$(“.mywidget”).addFunctionality(stuff)
{%endmacro%}
然后,在你的HTML使用这个小部件,你可以做

{% import 'mywidget.html' as mywidget %}

...
<html>
<head>
    <style>
        {{ mywidget.css() }}
    </style>
<head>
<body>
    {{ mywidget.body() }}

    <script>
        {{ mywidget.script() }}
    </script>
</body>
</html>
{%import'mywidget.html'作为mywidget%}
...
{{mywidget.css()}}
{{mywidget.body()}
{{mywidget.script()}}
当然,这里的问题是您需要手动将所有小部件放入各个区域。一旦您获得了大量的小部件,可能很难跟踪它们,并且很容易多次创建
mywidget.script()
代码,这将导致重复的事件触发

当然,在最终的解决方案中,您可以始终使用Python对象作为上下文呈现的一部分。需要注意的重要一点是,Jinja只呈现来自模板的文本。模板甚至不必是HTML模板,您可以使用Jinja呈现纯文本电子邮件。因此,很难想象图书馆试图创建这种“小部件”系统,并期望每个人都对结果感到满意。为什么要用他们需要支持的复杂功能来增加图书馆的复杂性(特别是因为Jinja已经为人们提供了构建这样一个框架的工具)