一种在Django中创建简单可重用模板组件的方法。
django-reusable-components的Python项目详细描述
django可重用组件
一种在Django中创建简单可重用模板组件的方法。在
它允许您创建“模板组件”，其中包含生成现代应用程序所需的前端代码所需的模板、Javascript和CSS。组件如下所示：
{%componentname="calendar"date="2015-06-19"%}
下面是呈现的内容（加上您指定的CSS和Javascript）：
^{pr2}$详细内容请阅读！在
安装
将应用程序安装到您的环境中：
pip install django_reusable_components
然后将应用程序添加到中已安装的应用程序中设置.py在
INSTALLED_APPS = [
...,
"django_components",
...
]
可选
为了避免使用{% load django_components %}在每个模板中加载应用程序，可以在中添加标记作为“内置”设置.py在
TEMPLATES = [
{
...,
'OPTIONS': {
'context_processors': [
...
],
'builtins': [
'django_components.templatetags.component_tags',
]
},
},
]
相容性
| Python version | Django version |
|---|---|
| 2.7 | 1.11 |
| 3.4 | 1.11, 2.0 |
| 3.5 | 1.11, 2.0, 2.1, 2.2 |
| 3.6 | 1.11, 2.0, 2.1, 2.2, 3.0 |
| 3.7 | 1.11, 2.0, 2.1, 2.2, 3.0 |
| 3.8 | 1.11, 2.0, 2.1, 2.2, 3.0 |
创建第一个组件
django组件中的组件是四个组件的组合：CSS、Javascript、django模板和一些Python代码将它们组合在一起。在
首先需要一个CSS文件。一定要给所有规则加上一个唯一的类，这样它们就不会与其他规则冲突。在
/* In a file called style.css */.calendar-component{width:200px;background:pink;}.calendar-componentspan{font-weight:bold;}
然后需要一个javascript文件来指定如何与该组件交互。您可以自由使用任何javascript框架。确保此组件不会与其他组件冲突的一个好方法是在调用其自身的匿名函数中定义所有代码。这使得所有定义的变量只能在这个组件内部定义，而不会影响其他组件。在
/* In a file called script.js */(function(){$(".calendar-component").click(function(){alert("Clicked calendar!");})})()
现在您需要一个Django模板作为您的组件。在本例中，请随意定义更多变量，如date。当创建这个组件的实例时，我们将发送这些变量的值。模板将使用您在Django设置文件中指定的任何模板后端来呈现。在
{# In a file called calendar.html #}<divclass="calendar-component">Today's date is <span>{{date}}</span></div>
最后，我们使用django组件将其绑定在一起。我们通过从Component类继承并指定context方法来创建组件。我们还注册了全局组件注册表，这样我们就可以轻松地在模板中的任何地方呈现它。在
fromdjango_componentsimportcomponentclassCalendar(component.Component):defcontext(self,date):return{"date":date,}deftemplate(self,context):return"[your app]/components/calendar/calendar.html"classMedia:css={'all':['[your app]/components/calendar/calendar.css']}js=['[your app]/components/calendar/calendar.js']component.registry.register(name="calendar",component=Calendar)
哇哦！我们已经创建了第一个组件。在
在模板中使用组件
首先加载component_tags标记库，然后使用component_dependencies和component标记将组件呈现到页面中。在
{%loadcomponent_tags%}<!DOCTYPE html><html><head><title>My example calendar</title>{%component_dependencies%}</head><body>{%componentname="calendar"date="2015-06-19"%}</body><html>
上述模板的输出将是：
<!DOCTYPE html><html><head><title>My example calendar</title><linkhref="style.css"type="text/css"media="all"rel="stylesheet"><scriptsrc="script.js"></script></head><body><divclass="calendar-component">Today's date is <span>2015-06-19</span></div></body><html>
这使得围绕可重用组件组织前端成为可能。而不是依赖于模板标记并将CSS和Javascript保存在静态目录中。在
在模板中使用插槽
组件支持称为插槽的东西。它们的工作方式非常类似于Django块，但仅限于您定义的组件内部。让我们通过更新日历.html模板：
<divclass="calendar-component"><divclass="header">{%slot"header"%}Calendar header{%endslot%}</div><divclass="body">{%slot"body"%}Calendar body{%endslot%}</div></div>
使用组件时，您可以指定要填充的插槽以及要使用模板中默认值的位置。看起来像这样：
{%component_block%}{%slot"body"%}Today's date is <span>{{date}}</span>{%endslot%}{%endcomponent_block%}
由于头块未指定，因此它取自基模板。如果您将其放入模板中，并且send in date=2020-06-06，则呈现的内容如下：
<divclass="calendar-component"><divclass="header"> Calendar header </div><divclass="body"> Today's date is <span>2020-06-06</span></div></div>
如您所见，组件槽允许您编写可重用的容器，当您使用组件时填充这些容器。这就形成了可在不同环境下使用的高度可重用组件。在
运行测试
要快速运行测试，请通过运行
pip install -r requirements-dev.txt ./pytest
该库还跨Python和Django的许多版本进行了测试。要以这种方式运行测试：
pip install -r requirements-dev.txt tox
- 项目
标签：
欢迎加入QQ群-->： 979659372
