https://github.com/retro/formbinder
Form builder for JavaScriptMVC with automatic binding to a model
https://github.com/retro/formbinder
Last synced: about 1 month ago
JSON representation
Form builder for JavaScriptMVC with automatic binding to a model
- Host: GitHub
- URL: https://github.com/retro/formbinder
- Owner: retro
- License: mit
- Created: 2011-04-25T04:01:44.000Z (about 14 years ago)
- Default Branch: master
- Last Pushed: 2011-12-20T22:44:58.000Z (over 13 years ago)
- Last Synced: 2025-05-05T01:06:29.927Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 103 KB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FormBinder
FormBinder is a form builder for JavaScriptMVC with automatic binding to a model. It is inspired by the [SimpleForm](https://github.com/plataformatec/simple_form) library for Rails.
It provides a builder for your forms and it binds that form to a model instance. That way you can implement live validation for your form in a model.
## Installation
You can install this plugin by either checking out the repo, or by downloading the code as an archive. If you're checking out the repo, make sure that you check it out in the form_binder folder instead of FormBinder:
git checkout [email protected]:retro/FormBinder.git form_binder
When you want to use the plugin you have to steal it from your controller:steal('form_binder', ....).then();
If you don't put FormBinder in your steal.root directory (one where the jquery, funcunit, steal, etc., folders are) you have to steal it by using path to the folder. For instance if you put it inside of ROOT\_JS\_DIRECTORY/my\_app/form\_binder you would steal it like this:steal('my_app/form_binder', ....).then();
## Usage
FormBinder can inspect Model's attributes property and automatically build form from that.
If you have a model that looks like this:
$.Model.extend("BlogPost",{
attributes : {
title : 'string',
lead : 'text',
}
}, {});You can build your form like this:
<% var f = form_builder(model_instance) // You can pass this variable from controller %>
>
<%= f.inputs(); %>
It will create fields for title and lead. Title will be rendered as a text input and lead as a textarea.
You can pass FormBuilder object from controller by instantiating it like this
var f = FormBinder.Builder.getBuilder(model_instance);
If you need more customization you can render each field on it's own:
<% var f = form_builder(model_instance) // You can pass this variable from controller %>
>
<%= f.input('title'); %>
<%= f.input('lead'); %>
## Customization
You can customize rendering of your fields by passing options to the input method:
>
<%= f.input('title', {as: 'textarea', label: 'Insert title', hint: 'Blog title'}); %>
FormBinder currently supports following field types:
* string - renders as a text input
* password
* textarea
* boolean - renders as a checkbox
* checkboxGroup
* radioGroup
* selectIf you want to provide available values to a radio group, a check box group or a select input there are two ways to do it. By default FormBinder's builder will look for a valuesForField class method on a Model:
$.Model.extend("BlogPost",{
attributes: {
status: 'string'
},
valuesForStatus: [['published', 'Published'], ['draft', 'Draft']]
}, {});You can also provide values inline in template:
<%= f.input('status', {as: 'select', values: [['published', 'Published'], ['draft', 'Draft']]}) %>
## Changing Input or Wrapper templatesFormBinder can load your custom field or wrapper templates. All you need to do is pass it as option to the FormBinder.Builder. Supported options are:
// Wrappers
generic_wrapper : 'views/wrappers/generic.ejs',
boolean_checkbox_radio_wrapper : 'views/wrappers/boolean_checkbox_radio.ejs',// Inputs
boolean_input : 'views/inputs/boolean.ejs',
checkbox_group_input : 'views/inputs/checkbox_group.ejs',
password_input : 'views/inputs/password.ejs',
radio_group_input : 'views/inputs/radio_group.ejs',
select_input : 'views/inputs/select.ejs',
string_input : 'views/inputs/string.ejs',
textarea_input : 'views/inputs/textarea.ejs'
If you wanted to change string_input's location you can initialize FormBinder.Builder like this:<% var f = form_builder(model_instance, {string_input: "My/location/of/string/input"}) %>
or
var f = FormBinder.Builder.getBuilder(model_instance, {string_input: "My/location/of/string/input"});
## Supported Versions and License
FormBinder works with the 3.2.1 and edge versions of JavaScriptMVC.
FormBinder is published under MIT License.