JSFiddle - React, Tailwind, and code Playground

by dfederighi

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">
<div id="my-form"></div>
<a href="javascript:void(0)" id="model-dump">Model Contents</a>

JavaScript

YUI().use('node', 'base', 'widget', 'model', function(Y) {

    var ModelForm = Y.Base.create('model-form', Y.Widget, [], {
        
        initializer: function(cfg) {
            this._fields = [];
            this._eventHandles = [];
            this._formValues = cfg.values;
            
            // Separate Model subclassed from Y.Model?
            this.model = new Y.Model({
                testText: '',
                testText2: '',
                testSelect: '',
                testCheckbox: false
            });

            // low-level model change event to update form fields            
            this.model.on('change', this._handleModelChange, this);
            this.after('render', Y.bind(this._afterRender, this));
            Y.one('#model-dump').on('click', function(e) {
                console.log('Model attributes:', this.model.getAttrs());
            }, this);
        },
        
        _afterRender: function() {
            this.get('contentBox').setHTML(Y.Node.create(this.get('markup')));
            this._parseFields();
        },
        
        getField: function(name) {
             return this._fields[name];  
        },
        
        // can use this just to update form fields, or you can 
        // pass off the validation for specific fields to specific 
        // validation methods on this widget!
        _handleModelChange: function(e) {
            if (e.src === 'form') { return; }
            
            Y.Object.each(e.changed, function(obj, key) {
                var field = this.getField(key);
            
                if (!Y.Lang.isUndefined(field)) {
                    field.set('value', obj.newVal);
                }
            
            }, this); 
        },
        
        _parseFields: function() {
            var allFields = this.get('boundingBox').one('form').all('*'),
                formValues = {};
            
            allFields.each(function (node, index, nodeList) {
                var...