Domplate
Overview
The Domplate jquery plugin provides an advanced template system taken and modified from Firebug.
Features:
- Templates are assembled via function calls instead of strings
- User-defined callbacks to iterate and format data
- Object oriented design allows for advanced hierarchies
NOTE: This plugin although functional has not had much actual use outside of the Firebug Firefox extension. It works well with Firefox but may have some problems with other browsers.
You can find more information here: http://code.google.com/p/domplate/
and here: http://www.christophdorn.com/Blog/category/domplate/
If you are interested in helping out to make this plugin cross-browser compatible, please express your interest on the discussion group.
Sample Code
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-domplate.js"></script>
<script>
$(document).ready(function(){
with($.domplate) {
var rep = $.domplate.create(
{
tpl: DIV({style:'border: 1px solid red; padding: 10px;'},
FOR("item", "$items|arrayIterator",
DIV({style:'border: 1px solid blue; margin-top: 5px; padding: 10px;'},'$item.msg')
)),
arrayIterator: function(array)
{
var items = [];
for (var i = 0; i < array.length; ++i) {
var value = array[i];
items.push(value);
}
return items;
}
});
var tpl = DIV({style:'border: 1px solid red; padding: 10px;'},'Hello World');
}
$('#body1').render(tpl);
var items = [
{msg:'Line1'},
{msg:'Line2'}
];
$('#body2').render(rep.tpl, {items:items}, rep);
});
</script>
</head>
<body>
<div id="body1"></div>
<div id="body2"></div>
</body>
</html>
-
FireBug中布局,必须通过FireBug提供的函数来完成的， 举例说明： var template = domplate({ tag: DIV( IMG({src:"http://icon.zol-img.com.cn/logo.gif"}), BR(), SPAN({class:"greenLabe