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

我想隱約定義窗口小部件是這樣的：如何在jinja2中構建可重用的小部件？

{% 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設計的角度來看，我很困惑，爲什麼我找不到任何如何做這樣的事情的例子。

來源

2013-10-22 kazagistar

您已經充實了部件系統的部分設計，但實際上只是展示瞭如何設計部件。另一部分是你如何最終在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-22 20:02:41

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

回答

相關問題