Question

我想要像这样模糊地定义一个小部件：

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

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

{% block script %}
$( ".mywidget" ).addFunctionality(stuff)
{% endblock %}

换句话说，减小了小部件需要的CSS，内容是什么（最好以某种方式进行参数化），以及文件末尾需要的脚本。然后，我希望能够扩展布局模板，向主体添加小部件（可能是具有不同参数的相同类型的多个小部件），并且将CSS和javascript正确添加到顶部和底部布局模板，每个窗口小部件类型一次。

这看起来像一个非常干净和简单的设计，并且从原生的UI设计角度来看，我很困惑为什么我找不到任何关于如何做这样的事情的例子。

Answer 1

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

例如，您可以使用Jinja Macros来定义窗口小部件。创建一个文件＆＃34; mywidget.html＆＃34;并使用......

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

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

{% macro script() -%}
    $( ".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>

当然，这里的问题是您需要手动将所有小部件放入各个区域。一旦你获得了大量的小部件，就很难跟踪它们，例如，很容易多次创建mywidget.script()代码，这会导致重复的事件触发。

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

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

1 个答案: