JS Bin

var MyMap = can.DefineMap.extend('MyMap', {

  formData: {

    Type: can.DefineMap,

    value: {

      name: "James",

      email: "james@canjs.com",

      title: "Head Engineer",

      options: {

        show_alerts: true,

        disable_chat: false,

        string_check: null,

        shoes: 4

      }

    }

  },

  updateFormData: function( path, type, element ){

    var value = element.value;

    if( element.type && element.type == "checkbox" ) {

      if( type == "boolean" ) {

        if( element.checked ) {

          value = true;

        } else {

          value = false;

        }

      } else {

        if( element.checked ){

          value = element.value;

        } else {

          value = null;

        }

      }

    }

    if( type == "integer" ) {

      value = parseInt( value );

    }

    var parentPath = path.split('.');

    var childPath = parentPath.pop();

    var obj = parentPath.reduce(function(prev, curr) {

        return prev ? prev[curr] : undefined

    }, this );

    obj.set( childPath, value );

    //console.log( obj[ childPath ] );

  },

  submitForm: function( event ){

    event.preventDefault();

    console.log( this.formData.serialize() );

  }

});

​

var MyComponentTemplate = can.stache( '<div>\

  <form ($submit)="submitForm( %event )">\

    <b>General: </b>\

    <table>\

      <tr>\

        <td>Name: </td>\

        <td>\

          <input ($change)="updateFormData( \'formData.name\', \'string\', %element )" value="{{formData.name}}"/>\

        </td>\

      </tr>\

      <tr>\

        <td>Email: </td>\

        <td>\

          <input ($change)="updateFormData( \'formData.email\', \'string\', %element )" value="{{formData.email}}"/>\

        </td>\

      </tr>\

      <tr>\

        <td>Title: </td>\

        <td>\

          <input ($change)="updateFormData( \'formData.title\', \'string\', %element )" value="{{formData.title}}"/>\

        </td>\

      </tr>\

    </table>\

    <br/>\

    <b>Options: </b>\

    <table>\

      <tr>\

        <td>Show Alerts: </td>\

        <td>\

          <input ($change)="updateFormData( \'formData.options.show_alerts\', \'boolean\', %element )" type="checkbox" value="1" {{#if formData.options.show_alerts}} checked {{/if}}/>\

        </td>\

      </tr>\

      <tr>\

        <td>Disable Chat: </td>\

        <td>\

          <td>\

            <input ($change)="updateFormData( \'formData.options.disable_chat\', \'boolean\', %element )"  type="checkbox" value="1" {{#if formData.options.disable_chat}} checked {{/if}}/>\

          </td>\

        </td>\

      </tr>\

      <tr>\

        <td>String Check: </td>\

        <td>\

          <td>\

            <input ($change)="updateFormData( \'formData.options.string_check\', \'string\', %element )"  type="checkbox" value="hello" {{#if formData.options.disable_chat}} checked {{/if}}/>\

          </td>\

        </td>\

      </tr>\

      <tr>\

        <td>Shoes: </td>\

        <td>\

          <select ($change)="updateFormData( \'formData.options.shoes\', \'integer\', %element )">\

            <option value="">Select...</option>\

            <option value="2">2</option>\

            <option value="4">4</option>\

            <option value="6">6</option>\

          </select>\

        </td>\

      </tr>\

    </table>\

    <br/>\

    <button type="submit">Submit</button>\

  </form>\

</div>' );

​

var MyComponent = can.Component.extend({

    tag: 'my-component',

    viewModel: MyMap,

    view: MyComponentTemplate

});

​

var MyRender = can.stache( '<my-component/>' );

var fragment = MyRender(  )

document.body.appendChild(fragment)