Fastview’s JavaScript
When downloaded from PyPI, this package contains pre-bundled JavaScript for managing formsets. When used normally, these will be included in your static files and the default templates will load them automatically; there is nothing more for you to do. See Using the pre-bundled static below when writing custom templates.
If you want to customise the JavaScript by subclassing, or want to include it in your own bundle or build process, you can use the corresponding npm package. Both PyPI and npm releases follow the same version numbering. See Customising and bundling your own below when doing this.
The bundle files are excluded from the repository, so if installing from git you will need to bundle it yourself - see Building JavaScript for more details.
Using the pre-bundled static
Load the static resource in your template’s <head>
tag:
<link rel="stylesheet" type="text/css" href="{% static "fastview/index.css" %}">
<script src="{% static "fastview/index.js" %}></script>
Formsets
The pre-bundled JavaScript looks for all formsets on page load. It expects to find the
following data-
attributes on form elements:
data-fastview-formset
Element: the container of the formset.
Value: the prefix for the formset
data-fastview-formset-template
Element: the
formset.empty_form
templateValue: the templated prefix for the formset,
formset.empty_form.prefix
data-fastview-formset-form
Element: the form container
Value: the prefix for the form
There can be more than one of these
See fastview/templates/create.html for a sample formset.
Customising and bundling your own
Customising
The code is designed to be subclassed. Override values and methods to fit your templates.
You can override the default formset or form classes; these control how the add and delete buttons are created or managed, how new forms should be inserted, and what happens when a form is added or deleted.
Bundling
This project uses features from ES2019; you will currently need Babel with the plugin for class properties:
npm install --save-dev @babel/plugin-proposal-class-properties
Your .babelrc
:
{
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties'],
}