ordnungswidrig/aloha.js

## aloha.js

(function(){

  jQuery.fn.tpl = function(f) {

    var sTpl = function(f) {
      var nodeInDocument = $(this);
      var tpl = nodeInDocument.clone();
      return {
      apply: function(data) {
	  var tplInstance = tpl.clone();
	  tplInstance._tpl_f = f;
	  tplInstance._tpl_f(data);
	  nodeInDocument.replaceWith(tplInstance).show();
	  nodeInDocument = tplInstance;
	}
      }
    };

    var tpls = [];
    this.each(function() {
	tpls.push(sTpl.apply(this, [f]));
      });
    return {apply: function(data) {
	$(tpls).each(function() {
	    this.apply(data);
	  });
      }
    };
  };

  jQuery.fn.tplList = function(f) {
    var childTpls = [];
    this.children().each(function() {
        var childTpl = $(this).clone();
	childTpls.push(childTpl);
    });
    this.apply = function(data) {
      var tpls = childTpls;
      this.empty();
      for(i in data) {
	var childNode = tpls[i % childTpls.length].clone();
	f.apply(childNode, [data[i], i]);
	this.append(childNode);
      }
    };
    return this;
  }

 }());

## demo.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Javascript templating fun</title>

    <script src="jquery-1.4.2.js" type="text/javascript"></script>
    <script src="jquery.color.js" type="text/javascript"></script>
    <script src="aloha.js" type="text/javascript"></script>

    <script type="text/javascript">
      /* <![CDATA[ */

     $(document).ready(function() {

       var tpl = $(".cont").tpl(function(data) {
         this.find(".title").text(data.length + " messages in your inbox.");

	 this.find(".messages").tplList(function(row, i) {
  	   this.find(".message").text('#' + i + ' ' + row.message);
           this.find(".author").text('@' + row.author);
         }).apply(data);
         this.hide().fadeIn();
       });

       $("#no-messages").click(function() {
         // After applying and emplty list, all <li> will dissapear
         tpl.apply([]);
       });

       $("#some-messages").click(function() {
         // But when applying some data, the <li> must be appear again.
         tpl.apply([{message: "Me sees the tunnel at the end of the horizon", author: "buxtehude"},
                     {message: "bananans oh bananans", author: "pope"},
                     {message: "third third bites the dogs", author: "franzl"}]);
       });

      });
      /* ]]> */
    </script>

    <style type="text/css">
      li.odd { color: #666; }
    </style>

  </head>
  <body>
    <h1>Javascript templating fun</h1>

    <p><a href="#" id="no-messages">Remove all messages</a></p>
    <p><a href="#" id="some-messages">Fill in some messages</a></p>

    <h2>First template example</h2>
    <div class="cont">
      <h3 class="title">List of 3 messages</h3>
      <p>You have no messages in your inbox.</p>
      <ul class="messages">
	<li class="first odd"><span class="message">This message is first</span> <span class="author">@buxtehude</span></li>
	<li class="even"><span class="message">This message is even</span> <span class="author">@buxtehude</span></li>
	<li class="odd"><span class="message">This message is odd</span> <span class="author">@bernbi</span></li>
	<li class="system even"><span class="message">This is a system message</span></li>
      </ul>
    </div>


    <h2>The second example, which used as a template with the same code as above</h2>
     <div class="cont">
       <div class="messages">
	 <p class="first"><span class="message">This message is first</span> <span class="author">@buxtehude</span></p>
	 <p class="even"><span class="message">This message is even</span> <span class="author">@buxtehude</span></p>
	 <p class="odd"><span class="message">This message is odd</span> <span class="author">@bernbi</span></p>
	 <p class="system"><span class="message">This is a system message</span></p>
       </div>
       <h3 class="title">List of 3 messages</h3>    </div>
  </body>
</html>

	(function(){

	jQuery.fn.tpl = function(f) {

	var sTpl = function(f) {
	var nodeInDocument = $(this);
	var tpl = nodeInDocument.clone();
	return {
	apply: function(data) {
	var tplInstance = tpl.clone();
	tplInstance._tpl_f = f;
	tplInstance._tpl_f(data);
	nodeInDocument.replaceWith(tplInstance).show();
	nodeInDocument = tplInstance;
	}
	}
	};

	var tpls = [];
	this.each(function() {
	tpls.push(sTpl.apply(this, [f]));
	});
	return {apply: function(data) {
	$(tpls).each(function() {
	this.apply(data);
	});
	}
	};
	};

	jQuery.fn.tplList = function(f) {
	var childTpls = [];
	this.children().each(function() {
	var childTpl = $(this).clone();
	childTpls.push(childTpl);
	});
	this.apply = function(data) {
	var tpls = childTpls;
	this.empty();
	for(i in data) {
	var childNode = tpls[i % childTpls.length].clone();
	f.apply(childNode, [data[i], i]);
	this.append(childNode);
	}
	};
	return this;
	}

	}());
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>Javascript templating fun</title>

	<script src="jquery-1.4.2.js" type="text/javascript"></script>
	<script src="jquery.color.js" type="text/javascript"></script>
	<script src="aloha.js" type="text/javascript"></script>

	<script type="text/javascript">
	/* <![CDATA[ */

	$(document).ready(function() {

	var tpl = $(".cont").tpl(function(data) {
	this.find(".title").text(data.length + " messages in your inbox.");

	this.find(".messages").tplList(function(row, i) {
	this.find(".message").text('#' + i + ' ' + row.message);
	this.find(".author").text('@' + row.author);
	}).apply(data);
	this.hide().fadeIn();
	});

	$("#no-messages").click(function() {
	// After applying and emplty list, all <li> will dissapear
	tpl.apply([]);
	});

	$("#some-messages").click(function() {
	// But when applying some data, the <li> must be appear again.
	tpl.apply([{message: "Me sees the tunnel at the end of the horizon", author: "buxtehude"},
	{message: "bananans oh bananans", author: "pope"},
	{message: "third third bites the dogs", author: "franzl"}]);
	});

	});
	/* ]]> */
	</script>

	<style type="text/css">
	li.odd { color: #666; }
	</style>

	</head>
	<body>
	<h1>Javascript templating fun</h1>

	<p><a href="#" id="no-messages">Remove all messages</a></p>
	<p><a href="#" id="some-messages">Fill in some messages</a></p>

	<h2>First template example</h2>
	<div class="cont">
	<h3 class="title">List of 3 messages</h3>
	<p>You have no messages in your inbox.</p>
	<ul class="messages">
	<li class="first odd"><span class="message">This message is first</span> <span class="author">@buxtehude</span></li>
	<li class="even"><span class="message">This message is even</span> <span class="author">@buxtehude</span></li>
	<li class="odd"><span class="message">This message is odd</span> <span class="author">@bernbi</span></li>
	<li class="system even"><span class="message">This is a system message</span></li>
	</ul>
	</div>


	<h2>The second example, which used as a template with the same code as above</h2>
	<div class="cont">
	<div class="messages">
	<p class="first"><span class="message">This message is first</span> <span class="author">@buxtehude</span></p>
	<p class="even"><span class="message">This message is even</span> <span class="author">@buxtehude</span></p>
	<p class="odd"><span class="message">This message is odd</span> <span class="author">@bernbi</span></p>
	<p class="system"><span class="message">This is a system message</span></p>
	</div>
	<h3 class="title">List of 3 messages</h3> </div>
	</body>
	</html>