JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<link rel="stylesheet" href="http://flamejs.github.com/flame-address-book/css/flame.css">
<script src="http://flamejs.github.com/flame-address-book/js/libs/flame_with_github_image_urls.min.js"></script>
<script type="text/x-handlebars">
{{view App.RootView}}
</script>
JavaScript
App = Ember.Application.create();
// We are mixing in Flame.Validatable to add on-the-fly validation to the Person class.
// We list the validations in the `validations` property, the listed validations can be one
// of the built in validtions, your own Validator subclass or a simple function.
App.Person = Ember.Object.extend(Flame.Validatable, {
validations: {
firstName: Flame.Validator.notBlank,
lastName: Flame.Validator.notBlank
}
});
App.personController = Ember.Object.create({
content: App.Person.create({
firstName: 'John',
lastName: ''
}),
save: function() {
alert('Saving...');
},
cancel: function() {
alert('Canceling...');
}
});
App.RootView = Flame.RootView.extend({
childViews: ['formView'],
formView: Flame.FormView.extend({
layout: { left: 0, width: 300 },
objectBinding: 'App.personController.content', // The object this form is going to edit
defaultTarget: 'App.personController', // The objects on which the buttons action will be invoked
labelWidth: 100, // The width of the labels show on left side of the form fields (optional)
properties: [
{
property: 'firstName', // The property of the object we're showing here
label: 'First Name', // The caption of the label next to the form field
validation: 'Please supply a first name' // The validation message to show in case this property is not valid
},
{
property: 'lastName',
label: 'Last Name',
validation: 'Please supply a last name'
}
],
buttons: [ // We can have any number of buttons shown below the form
{
title: 'Save',
action: 'save',
isDefault: true, // This button will respond when <Enter> is pressed in the form
...