gistfile1.txt

# NOTES: GENERIC JS/DOM FORM BUILDER

UserSchema = {
    $schema: "http://json-schema.org/draft-04/schema#"
    title: "User"
    description: ""
    type: "object"
    attributes: {
        id: {
            type: "string"
            unique: true
            required: true // non-standard place
        }
        name: {
            type: "string"
            default: "Lorem"
            minLength: 3
            maxLength: 10
            unique: true
        }
        age: {
            type: "number"
            default: "1983"
            minimum: 3
            maximum: 10
            multipleOf: 1
        }
        someTags: {
            type: "array"
            default: ['foo', 'bar']
        }
    }
    required: ["name"]
}

# Native JS - all

User = function() {}
User.schema = UserSchema

UserForm = new FormBuilder(User, options)

UserForm.use {type: 'string'}, new CustomInputWidget // not sure what this is yet, but similar API philosophy as *FormBuilder.
UserForm.use {type: 'array'}, new CustomTagInputWidget

# Vanilla

    js:
        UserForm = new FormBuilder(User, options)

    html:
        formElement = UserForm.renderElement()
        document.body.appendChild(formElement)


# Web Components / Polymer

alt 1:

    js:
        UserPolymerForm = new PolymerFormBuilder(User, options)
        UserPolymerForm.createElement("x-userform")

    html:
        <form is="x-userform" model="{{user}}">

alt 1:

    js:
        UserPolymerForm = new PolymerFormBuilder(User, options)
        UserPolymerForm.createElement("x-userform")

    html:
        <element name="x-form" extends="x-userform">
        <x-form builder="UserSchema" model="user">


# Famo.us

userFormView = new FamousFormBuilder(User, options)
userFormView.setModel(user)

context.add(userFormView)