6

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

{% 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 设计的角度来看，我很困惑为什么我找不到任何如何做这样的事情的例子。

4

1 回答 1

11

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

例如，您可以使用Jinja Macros来定义小部件。创建一个文件“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 %}

然后，在使用此小部件的 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 来呈现纯文本电子邮件。因此，很难想象图书馆的作者试图创建这种“小部件”系统并期望每个人都对结果感到满意。为什么要用他们需要支持的如此复杂的特性来增加库的复杂性（特别是因为 Jinja 已经为人们提供了构建这样一个框架的工具）？

于 2013-10-22T20:02:41.487 回答