Simple class to data-bind mappings for Knockoutjs using jQuery

jquery.db.js

(function($){
  $.db = function() {
    // any form inputs, data-bind based on value:name
    // if input type=text, use valueUpdate: 'afterkeydown'
    // if input type=checkbox or radio, use checked:name 
    // if textarea, use value:name
    $('input.db, textarea.db').each(function() {
        var $this = $(this);
        if (!this.name) return;
        switch(this.type) {
            case 'text':
                databind($this, "value: " + this.name + ", valueUpdate: 'afterkeydown'");
                break;
            case 'checkbox':
            case 'radio':
                databind($this, "checked: " + this.name);
                break;
            default:
                databind($this, "value: " + this.name);
        }
    });
    
    // if select, use options:nameOptions, value:name
    $('select.db').each(function() {
        var $this = $(this);
        if (!this.name) return;
        databind($this, "options: " + this.name + "Options, value: " + this.name);
    });

    // db-name in span tag= text: name
    // db-name=html: name
    // db-name-param= text: name(param)
    // db-if-name= visible: name
    // db-not-name= visible: !name()
    // db-action-name= click: name
    // db-action-name-param = click: function() { name(param) }
    // db-action-name in form tag= submit: name
    //if selected != null, add selected class
    //if selectedNAME == param, add selected class
    $('[class*="db-"]').each(function() {
        var $this = $(this);
        var dbs = this.className.match(/db\-[a-zA-Z0-9\-_]+/g);
        for (var i = 0, len = dbs.length; i < len; i++) {
            var db = dbs[i].split('-').slice(1);
            switch(db[0]) {
                case 'click':
                case 'action':
                    if (db.length > 1) {
                        var param = "(e)";
                        var evt = 'click';
                        var validate = '';
                        if (this.tagName == 'FORM') {
                            evt = 'submit';
                            if ($.fn.validate && !$this.data('validator')) {
                                $this.validate();
                                validate = "if ($(e).valid()) ";
                            }
                        }
                        if (db.length > 2) param = "(" + stringify(db[2]) + ")";
                        databind($this, evt + ": function(e) { " + validate + db[1] + param + "}");
                        if (db[1].match(/select/i)) {
                            if (db[1] == 'select') {
                                databind($this, "css: {selected: isSelected()}");
                            } else if (db.length > 2) {
                                databind($this, "css: {selected: " + db[1] + "() == " + stringify(db[2]) + "}");
                            }
                        }
                    }
                    break;
                case 'event':
                case 'on':
                    if (db.length > 2) {
                        var param = "()";
                        if (db.length > 3) param = "(" + stringify(db[3]) + ")";
                        databind($this, "event: {" + db[1] + ": function() { " + db[2] + param + " }}");
                    }
                    break;
                case 'css':
                case 'class':
                    if (db.length > 1) {
                        var param = "()";
                        var className = db[1];
                        if (db.length > 2) {
                            className += "-" + db[2];
                            param = "() == " + stringify(db[2]);
                        }
                        databind($this, "css: {'" + className + "': " + db[1] + param + "}");
                    }
                    break;
                case 'attr':
                    if (db.length > 2) {
                        var param = "()";
                        databind($this, "attr: {" + db[1] + ": " + db[2] + param + "}");
                    }
                    break;
                case 'if':
                    if (db.length > 1) {
                        var param = "";
                        if (db.length > 2) param = "(" + stringify(db[2]) + ")";
                        databind($this, "visible: " + db[1] + param);
                    }
                    break;
                case 'ifnot':
                case 'not':
                    if (db.length > 1) {
                        var param = "()";
                        if (db.length > 2) param = "(" + stringify(db[2]) + ")";
                        databind($this, "visible: !" + db[1] + param);
                    }
                    break;
                case 'foreach':
                case 'list':
                    if (db.length > 1) {
                        var param = "";
                        if (db.length > 2) param = "(" + stringify(db[2]) + ")";
                        databind($this, "foreach: " + db[1] + param);
                    }
                    break;
                case 'with':
                case 'model':
                    if (db.length > 1) {
                        var param = "";
                        if (db.length > 2) param = "(" + stringify(db[2]) + ")";
                        databind($this, "with: " + db[1] + param);
                    }
                    break;
                default:
                    var param = "()";
                    if (db.length > 1) param = "(" + stringify(db[1]) + ")";
                    if (this.tagName == 'SPAN') databind($this, "text: " + db[0] + param);
                    else databind($this, "html: " + db[0] + param);
            }
        }
    });
      
    // helpers
    function databind($elm, value) {
      if ($elm.attr('data-bind'))
        value = $elm.attr('data-bind') + ", " + value;
      $elm.attr('data-bind', value);
    }
    
    function stringify(value) {
        if (typeof value == 'undefined')
            return "''";
        if (value == 'true' || value == 'false')
            return value;
        return "'" + value + "'";
    }
  };
})(jQuery);