Embed Daybed forms
source link: https://blog.mathieu-leplatre.info/embed-daybed-forms.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Embed Daybed forms
Embed Daybed forms
Tue 23 July 2013
A brief article to introduce backbone-daybed, a few helpers to render Web forms for Daybed models.
Daybed, lay down and REST
Daybed is a data validation and storage API, written in Python, using Pyramid and the fantastic Cornice addon.
It's a minimalist Web API where you :
- define models (schemas)
- validate data and store data
- retrieve and update records
Key features are:
- CORS built-in support
- pluggable datastore engines (default is CouchDB)
- Geometry fields (maps!)
- Spore
- Access Control (under development)
It's a side-project we've been hacking on for a while, and we envision many applications ! One of them is, since the beginning, a Web forms service !
Models are yours
In order to create your own models, you can either use the crude GUI of daybed-maps or post a JSON manually on the Daybed instance we run for you.
In both cases you will reference your model definition using the ìd you chose.
Below, we define demo-poll-conf using cUrl in the command-line.
The model will be a stupid poll to ask how many conferences you attended in the past year.
# in a terminal... definition='{ "title": "Conferences Poll", "description": "How many conferences attended last year ?", "fields": [ { "name": "total", "type": "int", "description": "How many times ?" }, { "name": "category", "type": "enum", "choices": ["Web", "Strategy", "Technology"], "description": "Mostly in..." } ]}' curl -XPUT http://daybed.lolnet.org/definitions/demo-poll-conf -d "${definition}"
backbone-daybed, simple and stupid
Backbone.js is not the next big thing :) #ooold, it's sooo 2011 !
But frankly, it has remained simple, very easy to learn and yet quite efficient! That's why I chose it to demo the power of having storage-as-a-service with Daybed. Plus, backbone-forms provided the right level of abstraction I needed !
For example, here we embed a form in the page for the model we just created, and start polling the audience !
The few lines of Javascript below render the form and reacts on submission !
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone-forms/0.12.0/backbone-forms.min.js"></script> <script type="text/javascript" src="https://rawgithub.com/spiral-project/backbone-daybed/1e410a85/backbone-daybed.js"></script> <script type="text/javascript"> var form = Daybed.renderForm('#demo-form-container', {id: 'demo-poll-conf'}); form.on('created', function (record) { // plot chart ! }) </script>
The helper downloads the definition JSON, renders fields within an HTML form with backbone-forms. And in this example specifically, on submission, we fetch all the records, compute average values by category in order to plot some naive chart using Chart.js.
You can also have a look at the very few lines of the backbone-daybed demo, it's dead easy ! It features a CRUD application : Create, edit and delete records for the model of your choice ! http://spiral-project.github.io/backbone-daybed/#demo-poll-conf (See URL hash)
Shortly
- Daybed is a generic backend where you define models, validate and post data ;
- There are already various working applications built with this storage-as-a-service ;
- Most Javascript frameworks will play well natively with Daybed REST API ;
- backbone-daybed is just a helper to render Daybed models as forms, .... and a little bit more !
So far, Daybed data is not protected (like a wiki), but access control is currently being implemented :)
Stay tuned !
#daybed, #javascript, #backbone - Posted in the Dev category
© Copyright 2020 by Mathieu Leplatre. mnmlist Theme
Content licensed under the Creative Commons attribution-noncommercial-sharealike License.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK