jamesu · August 7, 2010 21:16
diff --git a/EvilOnJavaRails.html b/EvilOnJavaRails.html
 <html>
 <!-- 
 EvilOnJavaRails

 A quick and dirty microframework which works nothing like the actionview/actioncontroller code in rails.

 Requires EJS (http://www.embeddedjs.com/) and jQuery.

 Use at your own peril ;) - James
 -->
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>EvilOnJavaRails</title>
    
    <script type="text/javascript" src="/jquery.js"></script>
    <script type="text/javascript" src="/ejs_production.js"></script>
  
    <script type="text/javascript">
    
    var Templates = {}
    var TemplateQueue = []
    var Translations = {}
    var TranslationKeyExp = /\{\{([^}]+)\}\}/g
    
    var State = {}
    var Controllers = {}
    
    // Translation
    String.prototype.l = function() {
      var translation = Translations[this]
      return translation ? translation : this
    }
    
    String.prototype.l_with_args = function(args) {
      var translation = Translations[this]
      
      if (translation) {
        var replaced = translation.replace(TranslationKeyExp, function(match){
          var substitute = match.substr(2, match.length-4)
          return (args[substitute] || ('undefined: ' + substitute))
        })
        return replaced
      }
      
      return this
    }
    
    function loadTranslations()
    {
      Translations.hello_world = 'Hello {{object}}!'
    }
    
    function checkTemplates()
    {
      if (TemplateQueue.length == 0) {
        console.log(Templates)
        doTheRest()
      }
    }
    
    function loadTemplate(id, url)
    {
      TemplateQueue.push(url)
      console.log(url)
      $.ajax({url: url,
        success: function(data){
          console.log('GOT ' + id)
          Templates[id] = new EJS({text: data})
          TemplateQueue.pop()
          checkTemplates()
        },
        failure: function(data){
          console.log('Error:' + url)
        }
      })
    }
    
    function combine_hash(o1, o2)
    {
      var out = {}
      $.each(o1, function(idx, el){
        out[idx] = o1[idx]
      })
      $.each(o2, function(idx, el){
        out[idx] = o2[idx]
      })
      return out
    }
    
    function do_render(opts)
    {
      var locals = combine_hash(State, opts.locals || {})
      var template = opts.template
      
      console.log('doRender...')
      console.log(opts)
      console.log(locals)
      console.log('--')
      
      if (opts.collection) {
        var parts = []
        $.each(opts.collection, function(idx, object){
          locals.object = object
          parts.push(Templates[template].render(rc_env(locals)))
        })
        return parts.join('')
      } else {
        return Templates[template].render(rc_env(locals))
      }
    }
    
    function rc_env(opts)
    {
      opts.render = do_render
      opts.render_content = function() {
        var locals = {}
        return do_render({template:State.yield_template + '.ejs', locals:locals})  
      }
      return opts
    }
    
    // Controllers
    
    var Controller = function() {;}
    Controller.prototype.render = function(opts) {
      var ropts = combine_hash(opts, {
        template: 'layout_' + (opts['layout'] ? opts['layout'] : this.layout()),
      })
      State.yield_template = opts.template
      ropts.template += '.ejs'
      
      // Set output
      $('body').html(do_render(ropts))
      $('head title').html(State.layout.page_title)
      $.each(State.layout.additional_stylesheets, function(idx, sheet){
        $('head').append('<link href="/stylesheets/' + sheet + '.css" media="screen" rel="stylesheet" type="text/css" />')
      })
    }
    Controller.prototype.layout = function() {
      return null
    }
    
    var HelloWorldController = function() {;}
    HelloWorldController.prototype = new Controller()
    HelloWorldController.prototype.index = function(params) {
      this.render({template: 'helloworld_index', locals:{params:params}})
    }
    HelloWorldController.prototype.layout = function() {
      return 'layout'
    }
    Controllers['helloworld'] = new HelloWorldController()
    
    
    // Entry after templates have loaded
    function doTheRest()
    {
      loadTranslations()
      navigateTo({controller: 'helloworld', action: 'index'})
    }
    
    function navigateTo(opts)
    {
      // Reset state
      State.layout = {template: '', page_title: 'EvilOnJavaRails Test'}
      State.flash = {}
      State.content_for_sidebar = null
      State.action_name = opts.action
      State.controller_name = opts.controller
      
      $('head link').remove()
      console.log('Navigate:')
      console.log(opts)
      
      var controller = Controllers[opts.controller]
      if (!controller)
      {
        $('head title').html('Error!')
        $('body').html('<h1>Error</h1>')
      }
      else
      { 
        console.log(controller)
        try {
          controller[opts['action']](opts)
        } catch (e) { console.log(e) }
      }
      console.log('--')
    }
    
    $(document).ready(function() {
      loadTemplate('layout.ejs', '/layout.ejs')
      loadTemplate('helloworld_index.ejs', '/helloworld_index.ejs')
    });
    </script>
  </head>
  <body id="body">
  </body>
 </html>
diff --git a/helloworld_index.ejs b/helloworld_index.ejs
 <h1><%= 'hello_world'.l_with_args({object: 'World'}) %></h1>
diff --git a/layout.ejs b/layout.ejs
 <%= render_content() %>
	<html>
	<!--
	EvilOnJavaRails

	A quick and dirty microframework which works nothing like the actionview/actioncontroller code in rails.

	Requires EJS (http://www.embeddedjs.com/) and jQuery.

	Use at your own peril ;) - James
	-->
	<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<title>EvilOnJavaRails</title>

	<script type="text/javascript" src="/jquery.js"></script>
	<script type="text/javascript" src="/ejs_production.js"></script>

	<script type="text/javascript">

	var Templates = {}
	var TemplateQueue = []
	var Translations = {}
	var TranslationKeyExp = /\{\{([^}]+)\}\}/g

	var State = {}
	var Controllers = {}

	// Translation
	String.prototype.l = function() {
	var translation = Translations[this]
	return translation ? translation : this
	}

	String.prototype.l_with_args = function(args) {
	var translation = Translations[this]

	if (translation) {
	var replaced = translation.replace(TranslationKeyExp, function(match){
	var substitute = match.substr(2, match.length-4)
	return (args[substitute] \|\| ('undefined: ' + substitute))
	})
	return replaced
	}

	return this
	}

	function loadTranslations()
	{
	Translations.hello_world = 'Hello {{object}}!'
	}

	function checkTemplates()
	{
	if (TemplateQueue.length == 0) {
	console.log(Templates)
	doTheRest()
	}
	}

	function loadTemplate(id, url)
	{
	TemplateQueue.push(url)
	console.log(url)
	$.ajax({url: url,
	success: function(data){
	console.log('GOT ' + id)
	Templates[id] = new EJS({text: data})
	TemplateQueue.pop()
	checkTemplates()
	},
	failure: function(data){
	console.log('Error:' + url)
	}
	})
	}

	function combine_hash(o1, o2)
	{
	var out = {}
	$.each(o1, function(idx, el){
	out[idx] = o1[idx]
	})
	$.each(o2, function(idx, el){
	out[idx] = o2[idx]
	})
	return out
	}

	function do_render(opts)
	{
	var locals = combine_hash(State, opts.locals \|\| {})
	var template = opts.template

	console.log('doRender...')
	console.log(opts)
	console.log(locals)
	console.log('--')

	if (opts.collection) {
	var parts = []
	$.each(opts.collection, function(idx, object){
	locals.object = object
	parts.push(Templates[template].render(rc_env(locals)))
	})
	return parts.join('')
	} else {
	return Templates[template].render(rc_env(locals))
	}
	}

	function rc_env(opts)
	{
	opts.render = do_render
	opts.render_content = function() {
	var locals = {}
	return do_render({template:State.yield_template + '.ejs', locals:locals})
	}
	return opts
	}

	// Controllers

	var Controller = function() {;}
	Controller.prototype.render = function(opts) {
	var ropts = combine_hash(opts, {
	template: 'layout_' + (opts['layout'] ? opts['layout'] : this.layout()),
	})
	State.yield_template = opts.template
	ropts.template += '.ejs'

	// Set output
	$('body').html(do_render(ropts))
	$('head title').html(State.layout.page_title)
	$.each(State.layout.additional_stylesheets, function(idx, sheet){
	$('head').append('<link href="/stylesheets/' + sheet + '.css" media="screen" rel="stylesheet" type="text/css" />')
	})
	}
	Controller.prototype.layout = function() {
	return null
	}

	var HelloWorldController = function() {;}
	HelloWorldController.prototype = new Controller()
	HelloWorldController.prototype.index = function(params) {
	this.render({template: 'helloworld_index', locals:{params:params}})
	}
	HelloWorldController.prototype.layout = function() {
	return 'layout'
	}
	Controllers['helloworld'] = new HelloWorldController()


	// Entry after templates have loaded
	function doTheRest()
	{
	loadTranslations()
	navigateTo({controller: 'helloworld', action: 'index'})
	}

	function navigateTo(opts)
	{
	// Reset state
	State.layout = {template: '', page_title: 'EvilOnJavaRails Test'}
	State.flash = {}
	State.content_for_sidebar = null
	State.action_name = opts.action
	State.controller_name = opts.controller

	$('head link').remove()
	console.log('Navigate:')
	console.log(opts)

	var controller = Controllers[opts.controller]
	if (!controller)
	{
	$('head title').html('Error!')
	$('body').html('<h1>Error</h1>')
	}
	else
	{
	console.log(controller)
	try {
	controller[opts['action']](opts)
	} catch (e) { console.log(e) }
	}
	console.log('--')
	}

	$(document).ready(function() {
	loadTemplate('layout.ejs', '/layout.ejs')
	loadTemplate('helloworld_index.ejs', '/helloworld_index.ejs')
	});
	</script>
	</head>
	<body id="body">
	</body>
	</html>