如何将 JS 框架与 django 表单集成答案

【问题标题】：How to integrate JS frameworks with django forms如何将 JS 框架与 django 表单集成
【发布时间】：2013-06-07 03:47:51
【问题描述】：

我是 django 的新手。我使用 django 表单来呈现 HTML 表单。

我想将默认的 ChoiceField 替换为流行的 JS 框架“Select2”http://ivaynberg.github.io/select2/。

我知道直接在 HTML 页面上这样做很容易，但我发现很难将它集成到 django 表单设计中。也许一些 3rd 方 django 插件可以作为 https://github.com/applegrew/django-select2 工作，但是当我添加一个更多的 JS 框架时，我可能需要越来越多的 3rd 方 django 插件。

那么使用 django 表单的正确方法是什么？为什么 django 在 HTML 页面之外使用 HTML 表单？与在 Java 中一样，所有 HTML 元素都将进入 JSP 页面。

【问题讨论】：

标签： django django-forms django-templates

【解决方案1】：

我只需在表单呈现的模板内的{% block extra_header %} 中添加select2 所需的<script> 和<style> 标记即可。这些脚本标签应该加载select2 库并直接在客户端为选择框运行它（恕我直言，不需要服务器端更改）。任何可能需要的 DOM 更改也应该在这些脚本中完成（这使新功能保持封装和隔离）。

{% block extra_header %} 应直接加载到主模板的 <header> 部分。

【讨论】：

【解决方案2】：

您可以编写自定义小部件并将其附加到 ChoiceField。这不是 1-liner，但看起来有人让你轻松了。看看这个：

select2 with django choicefield

【讨论】：

github.com/applegrew/django-select2 应该适用于这种情况。但是当我添加更多的 JS 框架时，我必须添加更多这样的库吗？我不认为这是一种优雅的方式。
您可以看看他们是如何做到的，并使用相同的方法。基本上，使用 select2 创建一个 django 小部件。
这样我需要为每个新的 JS 框架编写一个小部件？