aweforms v0.1.8
aweforms
mustache lambdas to create bootstrap forms.
It provides helper lambdas that encapsulates your input fields in useful ways, removing boilerplate HTML code and speeding up development.
Could be used as express middleware or standalone.
Features:
render fields as bootstrap horizontal forms fields Actually bootstrap is render via non provided less extensions. See an example of less code to render fields as bootstrap horizontal forms, and a template using it on ecm-revoluted
automatically compile value and name attribute
- support select and input fields of all types
- support textarea TBD
- render static forms
- render angular.js forms TBD
Getting Started
Install the module with: npm install aweforms --save
Documentation
Aweforms could be used as express middleware or standalone.
Standalone usage:
var aweforms = require('aweforms');
var hogan = require("hogan.js");
var testModel = {
user: {
test: "ciao",
errors: {
test: {
type: "test-error"
}
}
},
af: aweforms.newInstance()
};
var template = hogan.compile('{{#af.field}}<input type="text" id="user.test">{{/af.field}}');
var result = template.render(testModel);
result is:
<div class="field text-error">
<label for="user.test">user.test</label>
<div>
<input type="text" id="user.test" name="test" value="ciao">
<span class="error">test-error</span>
</div>
</div>
Express usage:
...
//initialize the module
var aweforms = require("aweforms");
app.use(aweforms.init(i18n));
...
var testModel = {
user: {
test: "ciao",
errors: {
test: {
type: "test-error"
}
}
}
};
app.get('/user',function(res,req){
res.render('user',testModel);
});
assuming that user.html template is:
{{#af.field}}<input type="text" id="user.test">{{/af.field}}
results will be:
<div class="field text-error">
<label for="user.test">user.test</label>
<div>
<input type="text" id="user.test" name="test" value="ciao">
<span class="error">test-error</span>
</div>
</div>
Translation of labels and errors
aweforms uses i18n to render labels and error text. If you provide a locales with compatible translation, they appear translated accordingly. For example, with this json to translate words:
{
"user.test": "Salutation",
"test-error": "Invalid value",
}
Results of previous example should become:
<div class="field text-error">
<label for="user.test">Salutation</label>
<div>
<input type="text" id="user.test" name="test" value="ciao">
<span class="error">Invalid value</span>
</div>
</div>
You could customize translation by giving a i18n instance as first parameter of
newInstance
. Otherwise a default instance is set up with this configuration:
{
directory: __dirname + '/locales'
}
Examples
For an example of usage with Express js, see ecm-revoluted. For an example of standalone usage, see test file
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style.
Add unit tests for any new or changed functionality.
Please use mocha and grunt to test your code.
Existing test could be found on test folder.
Release History
Please see History.md
License
Copyright (c) 2013 Andrea Parodi Licensed under the MIT license. See license file for details