Basically, it is a translator from HTML to JavaScript function running on Ruby. And the API and result is very simmilar to Amrita2 Ruby feature.

Sample

makes a JavaScript function named 't'. It is very similar to Amrita2 Ruby Template Object.

returns a DOM Element object which is expanded from template and PO (Presentation Object).

How to use it

In every case, details of UI is a HTML text. Your JavaScript code dose not handle DOM functions or HTML tags. Only you should do is pass a PO object like this

Stauts and Roadmap

I'd like to make this feature full compatible with Amrita2 Ruby template system. And I think I can make it because JavaScript has enough feature for Amrita2 Template.

But I don't know JavaScript Language well now. So the current version is very restricted and buggy.

Hello World

--- ../sample/js/hello.rb ---
require "amrita2/template"
require "amrita2/js"
include Amrita2

t = JS::TemplateText.new <<-END
   <div>
      <h1 id='title'>title will be inserted here</h1>
      <p>This paragraph is static part</p>
      <p id='body'>body text will be inserted here</p>

      <ul id='list'><li id='item' /></ul>
      <table id='table' border='1'>
         <tr id='detail'><td id='a' /><td id='b' /></tr>
      </table>
      <p id='active'>For detail see<a id='link'></a></p>
   </div>
END

js = JS::CodeGenerator.new
t.js_template('tmpl', js)
jssrc = Amrita2::JS::RUNTIME_SRC + js.results.join("\n") 

tmpl = TemplateText.new <<END
<html>
<head>
<title>Amrita2 JS Hello</title>
<script id='script' language="JavaScript" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
function debug(s) {
}

function main()
{ 
  var e = document.getElementById('body') ;
  var t = new tmpl() ;
  var data = { 
    'title': 'Hello JavaScript', 
    'body': 'This paragraph is dynamic parta and it was generated by amrita2 javascript template',
    'list': { 'item': [1,2,3] },
    'table': { 
      'detail': [
         { 'a':11 , 'b': 12 },
         { 'a':21 , 'b': 22 }
      ]
    },
    'active': function(t) {
       t.link('Amrita2 Hope Page', { 'href': 'http://amrita2.rubyforge.org/'} ) ;
    }
  } ;
  t.expand(e, data) ;
}
</script>
</head>

<body onload='main()'>
<div id='body' />
</body>
</html>
END


tmpl.expand(STDOUT, :script => Amrita2::SanitizedString[jssrc], :body=>true)

Ajax with Amrita2

--- ../sample/js/json_ajax.rb ---
require "amrita2/template"
require "amrita2/js"
include Amrita2

# template for the JavaScript
t = JS::TemplateText.new <<-END
   <div>
      <h1 id='title'>title will be inserted here</h1>
      <p>This paragraph is static part</p>
      <p id='body'>body text will be inserted here</p>
      <p id='now'></p>
   </div>
END

# compiling the template to JavaScript functions
js = JS::CodeGenerator.new
t.js_template('tmpl', js)
jssrc = Amrita2::JS::RUNTIME_SRC + js.results.join("\n") 

# template for the document
tmpl = TemplateText.new <<END
<html>
<head>
<title>Amrita2 JS Hello</title>
<script id='script' language="JavaScript" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">

// This will be removed until release
function debug(s) {
}

// HTTP accessing function
/* from http://www.peej.co.uk/articles/rich-user-experience.html */
function getHTTPObject() {
  var xmlhttp;
  try {  
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false; 
    } 
  } 
  if (!xmlhttp) { 
    if(typeof XMLHttpRequest != 'undefined') {
      try {
        xmlhttp = new XMLHttpRequest(); 
      } catch (e) {
        xmlhttp = false; 
      } 
    }
  }
  return xmlhttp; 
}

// Use the function compiled from from the template
function expand_template(datasrc)
{ 
  // get the element to which the template will be inserted
  var e = document.getElementById('output') ;
  while (e.hasChildNodes()) {
      e.removeChild(e.firstChild) ;
  }
  // make a template object
  var t = new tmpl() ;
  // get data
  eval(datasrc) ;
  // add changing data for demo
  var d = new Date()
  data.now = d.getMinutes() + ":" + d.getSeconds() ;
  // mix the data and the template
  t.expand(e, data) ;

}

/* 
  json_ajax_data.txt is a file contains a 
  JavaScript source generating a data.

  data = {
    'title': 'Ajax with Amrita2 ',
    'body':  'This is a text from the data source.'
  }

*/

function getData() { 
  var http = getHTTPObject(); 
  http.open("GET", "json_ajax_data.txt", true); 
  http.onreadystatechange = function() {
    if (http.readyState == 4) {
      expand_template(http.responseText); 
      setTimeout("getData()", 3000) ;
    } 
  } 
  http.send(null);
}

</script>
</head>

<body onload='getData()'>
<div id='output' />
</body>
</html>
END

# expand the document statically
tmpl.expand(STDOUT, :script => Amrita2::SanitizedString[jssrc], :output=>true)

Ajax with Amrita2 and Ruby on Rails

Function and appearance is same but there is a important difference: this version refreshes every 5 seconds the TODO list asynchronously. If you typed some text for a new TODO, the text field dose not lose foucus and the text you typed will be kept when refreshing is done.