example.jade

!!! 5
html
  head
    script(type="text/javascript",src="./build/build.js")
    script(type="text/javascript").
      function init() {
        var syncModel = require('sync-model');
        var model = require('component-model');

        var User = model('user')
                    .attr('name', {
                      required: true,
                      type: 'string'
                    })
                    .attr('email', {
                      required: true,
                      type: 'string',
                      format: 'email'
                    })
                    .attr('address', {
                      type: 'object',
                      properties: {
                        street: {
                          required: true,
                          type: 'string'
                        },
                        zipcode: {
                          required: true,
                          type: 'string'
                        },
                        city: {
                          required: true,
                          type: 'string'
                        }
                      }
                    })
                    .attr('orders', {
                      type: 'array',
                      items: {
                        type: 'object',
                        properties: {
                          amount: {
                            required: true,
                            type: 'integer'
                          },
                          name: {
                            required: true,
                            type: 'string'
                          }
                        }
                      }
                    });
        function callback (errors) {
          console.log('validaton errors: ', errors);
        }
        var user = syncModel(document.querySelector('form'), User, callback, this);
        console.log(user);
      };
  body(onload="init()")
    form
      span Name: 
      input(name="name",value="Hans")
      br

      span Email:
      input(name="email",value="h@ns")
      br

      span Address:
      input(name="address.street",value="streetname")
      input(name="address.zipcode",value="zipcode")
      input(name="address.city",value="city")
      br

      span Orders:
      input(name="orders.0.amount",value="1")
      input(name="orders.0.name",value="Socks")
      br

      input(name="orders.1.amount",value="2")
      input(name="orders.1.name",value="Shoes")