djwc: Django WebComponents

简介

WebComponents是W3C标准，已由所有浏览器支持了几年，有关详细信息，请参阅他们的入门指南。

入门指南

如何尝试djwc

快速测试

• 克隆此仓库
• 运行 pip install django -e .
• 使用以下命令启动示例： ./manage.py djwc && ./manage.py runserver

您应该在 localhost:8000 上看到一些polymer组件

如何安装djwc

• pip install djwc,
• 将 djwc 添加到 INSTALLED_APPS（用于管理命令）
• 将 'djwc.middleware.StaticMiddleware' 添加到 MIDDLEWARE（以注入脚本）

如何使用webcomponents

• 声明您要使用的组件
• 运行 ./manage.py djwc 以安装它们（不使用NodeJS）
• 使用您组件的HTML标签

这就 完成了！！ 中间件将完成其余工作。

继续阅读有关每一步的详细信息。

声明组件

您可以为每个应用程序、每个项目声明组件，也可以包括捆绑包。

设置

您可以通过引用其npm路径在设置中将 paper-input 组件添加到DJWC

DJWC = {
    'COMPONENTS': {
        'paper-input': '@polymer/paper-input/paper-input.js',
    }
}

这将覆盖任何其他设置。

AppConfig

或者，定义一个 AppConfig.components 属性以将组件添加到可重用应用中。

class AppConfig(apps.AppConfig):
    components = {
        'paper-input': '@polymer/paper-input/paper-input.js',
    }

这将被自动检测。

库

您还可以使用 DJWC['LIBRARIES'] 设置包含一串 webcomponents

DJWC = {
    'LIBRARIES': ['djwc_polymer'],
}

更多内容即将到来，这些内容目前在手动维护。

使用 ./manage.py djwc 安装组件

然后，运行 ./manage.py djwc 命令，将所有脚本下载到静态目录中。在生产环境中在 collectstatic 之前以及每次更改组件声明时都这样做。

使用组件

只需在您想要的位置使用您的新标签，例如在模板中

<paper-input always-float-label label="Floating label"></paper-input>

每当中间件找到 paper-input 标签时，都会注入相应的脚本。

常见问题解答

我听说 WebComponents 不可访问

显然，可访问性与 aria 属性兼容。

接下来是什么？

• 当贡献者破坏它时，请添加单元测试
• 优化 djwc 命令
• 自动化 djwc_polymer
• 添加更多包！比如 bootstrap-webcomponents！耶！