view_builder.js

/* View Builder for JavaScript with support for CommonJS (and therefore Node.js) 
   By M@ McCray - 01/31/2010

Usage Example:

View.register('_footer', function(content){
  return div({ cls:'footer'},
    div({ cls:'footer-content' },
      content
    )
  )
});
 
View.register('page', function(data){
  return html (
    head (
      title ("I'm the title")
    ),
    body ({ cls:'body' },
      h1 ('Heading'),
      p (data.body),
      _footer(
        text("© 2010 M@ McCray;")
      )
    )
  );
});
 
View.render('page', { body:"I'm the content" }); // Returns string...

From Node.js

var View = require('./view_builder').View;

// Use like example above...

*/

var View = {
  
  _views: {},
  
  register: function(name, block) {
    with(this._views){ with(this.Builder) {
      this._views[name] = eval("("+ block.toString() +")");
    }};
    return this._views[name];
  },
  
  render: function(name, data) {
    if(name in this._views) {
      return (this._views[name])(data);
    } else {
      throw "View '"+ name +"' not found.";
    }
  },
  
  Builder: (function(){
    // Internal
    function write_tag(tag, options) {
      var content = '',
          atts = "";
      for(var i=0; i<options.length; i++) {
        var arg = options[i];
        if (typeof(arg) == 'string' || typeof(arg) == 'number') {
          content += arg.toString();
        } else if (typeof(arg) == 'function') {
          content += arg();
        } else if ( arg instanceof Object ) {
          for(var prop in arg) {
            var vprop = vprop = (prop === 'cls') ? 'class' : prop;
            if(typeof atts[prop] != 'function') { // A fix for Prototype ???
              atts += ' '+ vprop +'="'+ arg[prop] +'"';
            }
          };
        }
      };
      if(content == '') {
        return '<'+ tag + atts +'/>';
      } else {
        return '<'+ tag + atts +'>'+ content +'</'+ tag +'>';
      }
    };

    function text() { 
      var content=''; 
      for(var i=0; i<arguments.length; i++){ content += arguments[i].toString(); };
      return content; 
    };

    function render(name, data) {
      return Builder.render(name, data);
    };

    var allTags = ['a','abbr','acronym','address','area','article','aside','b','base','bdo','big','blockquote','body','br','button','caption','cite','code','col','colgroup','dd','del','dfn','dialog','div','dl','DOCTYPE','dt','em','fieldset','figure','form','footer','h1','h2','h3','h4','h5','h6','head','header','hgroup','html','hr','i','img','input','ins','kbd','label','legend','li','link','map','menu','meta','nav','noscript','object','ol','optgroup','option','p','param','pre','q','samp','script','section','select','small','span','strong','style','sub','sup','table','tbody','td','textarea','tfoot','th','thead','title','tr','tt','ul'],
        builderLocals = {};
    for(var i=0; i<allTags.length; i++) {
      (function(tag){ // Creates a closure with the tag variable frozen...
        builderLocals[tag] = function() { return write_tag(tag, arguments)};
      })(allTags[i]);
    };
    
    builderLocals['text'] = text;
    builderLocals['render'] = render;
    
    return builderLocals;
  })()
  
}
if(typeof exports != 'undefined') exports.View = View;