为django创建可重用ui组件的小框架
django-page-components的Python项目详细描述
django页面组件
“页面组件”是用户界面的一个单元（想想reactjs组件）。django-page-components提供 创建页面组件并在django视图和模板中使用它们的极简框架。
要定义页面组件，需要创建^{tt2}的子类$ 并像这样实现render方法：
importpage_componentsimportdjango.utils.htmlclassAddToCartButton(page_components.PageComponent):def__init__(self,product):self.product=productclassMedia:js=("add-to-cart.js",# this is where addToCart is defined)css={"all":("add-to-cart.css"# this is where `.add-to-card` styles are defined)}defrender(self):returndjango.utils.html.format_html("""<button class="add-to-cart" onclick="addToCart({ product_id })">Add to cart</button>""",product_id=self.product.id)
您还可以使用TemplatePageComponent基类来实现基于模板的页面组件。 在这种情况下，您可能希望实现get_context_data方法：
classAddToCartButton(page_components.TemplatePageComponent):template_name="add-to-cart-button.html"...defget_context_data(self,**kwargs):kwargs["product_id"]=self.product_idreturnsuper(AddToCartButton,self).get_context_data(**kwargs)
注意，由您决定如何实现render方法，以及应该添加哪些附加方法 到您的页面组件。一个一般的建议是保持__init__方法尽可能轻量级，并且 render方法中的所有繁重工作。
建议的约定是将页面组件类存储在应用程序中的page_componentspackage/模块中：
myapp.page_components.AddToCartButton
现在，当我们定义了一些页面组件时，是时候在视图中使用它们了：
importdjango.views.genericimportpage_componentsimportmyapp.modelsimportmyapp.page_componentsclassProductPage(page_components.PageComponentsView,django.views.generic.DetailView,):model=myapp.models.Producttemplate_name="product.html"defget_page_components(self):return{"add_to_cart_button":myapp.page_components.AddToCartButton(self.object)}
和模板：
<html><head> /* this will include CSS files for all page components on that page */ {{ view.media.css.render }} </head><body><h1>{{ object.title }}</h1> {{ page_components.add_to_cart_button }} /* this will include JavaScript files for all page components on that page */ {{ view.media.js.render }} </body></html>
注意，默认情况下，页面组件放置在模板上下文中的page_components命名空间中。你可以改变 通过将page_components_context_name属性添加到视图类，或使用 PAGE_COMPONENTS_CONTEXT_NAME设置。如果将page_components_context_name设置为None，它将禁用 整个命名空间。
更改
0.1
- Initial release
欢迎加入QQ群-->： 979659372
