Form Model v2

by dfederighi

HTML

<body>
    
</body>

CSS

body {
    background-color: #333;
    color: #fff;
    font-family: helvetica, arial;
}

input {
    background-color: #444;
    border: 1px solid #999;
    font-size: 20px;
    color: #fff;
    padding: 3px 5px
}

label.label,
span.label {
    width: 200px;
    display: inline-block;
    text-align: right;
    padding-right: 10px;
}

input[type="checkbox"] + label.label {
    text-align: left;
    margin-left: 5px;
}

.yui3-checkbox-field-content {
    margin-left: 210px;
    margin-top: 15px;
}

JavaScript

YUI({
    //gallery: 'gallery-2011.11.10-16-24'
}).use("gallery-form", "model", function (Y) {
    // ???
    var fieldNames = ['testText', 'testSelectField', 'testCheckbox'];
    
    var modelForm = Y.Base.create('modelForm', Y.Form, [], {
        initializer: function(cfg) {
            var model = this.get('model');
            
            this.formValues = cfg.values;
            
            model.after('change', this._handleModelChange, this);
            this.after('render', this._afterRender, this);
        },
        
        _afterRender: function() {
            var model = this.get('model');
        
            Y.Array.each(fieldNames, function(name) {
                var field = this.getField(name);

                if (this.formValues[name]) {
                    field.set('value', this.formValues[name]);   
                } else {
                    if (model.get(name)) {
                        field.set('value', model.get(name));   
                    }
                }
                
                // need to setup one of these for each type?
                switch (field.name) {
                    case 'text-field':
                        field._fieldNode.on('keyup', function(e) {
                            model.set(e.currentTarget.get('name'), e.currentTarget.get('value')); 
                        });
                        break;
                    case 'select-field':
                        field._fieldNode.on('change', function(e) {
                            model.set(name, e.target.get('value'));
                        });
                        break;
                    case 'checkbox-field':
                        field._fieldNode.on('click', function(e) {
                            console.log('checkbox click:e:', e);
                            model.set(name, e.target.get('checked'));
                        });
                        break;
                    default:
                        break;
        ...