worldsayshi/fiddle.html

## fiddle.html
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
   <HEAD>
      <TITLE>
         Datasource to DOM mapping
      </TITLE>
   </HEAD>
<BODY>
   <b>A list of stuff:</b>
    <ul id="dest"></ul>
</BODY>
</HTML>

## fiddle.js
// The actual mapping object
function Mapping(dest, elementMapping, srcpath) {
    return function (src) {
        for(var i=0; i<srcpath.length;i++){
            src=src[srcpath[i]];
        }
        //dest.clear();
        for(var i=0; i<src.length;i++){
            var elem = elementMapping(src[i]);
            dest.appendChild(elem);
        }
    }
}

// A dummy data request
function getDataMaybeAsynchronous (callback) {
    var data = {};
    var list = [];
    data.list = list;
    for (var i=0;i<20;i++){
        list.push({name:i,content:Math.random()*100});
    }
    callback(data);
}


// Example use:
var destinationList = document.getElementById("dest");
var createListElem = function(cont){
    var elem = document.createElement('li');
    var text = document.createTextNode(cont.content);
    elem.appendChild(text);
    return elem;
};
var mapping = Mapping (destinationList,
                       createListElem,
                       ["list"]);
getDataMaybeAsynchronous(mapping);

## fiddle.manifest
name: Source to Dom mapping
description: Combinator utilities for creating a callback that inserts elements into the DOM tree once a long running data retrieval operation is done.
authors:
  - Per Fredelius
resources:
  - http://no
normalize_css: no
	<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
	<HTML>
	<HEAD>
	<TITLE>
	Datasource to DOM mapping
	</TITLE>
	</HEAD>
	<BODY>
	<b>A list of stuff:</b>
	<ul id="dest"></ul>
	</BODY>
	</HTML>
	// The actual mapping object
	function Mapping(dest, elementMapping, srcpath) {
	return function (src) {
	for(var i=0; i<srcpath.length;i++){
	src=src[srcpath[i]];
	}
	//dest.clear();
	for(var i=0; i<src.length;i++){
	var elem = elementMapping(src[i]);
	dest.appendChild(elem);
	}
	}
	}

	// A dummy data request
	function getDataMaybeAsynchronous (callback) {
	var data = {};
	var list = [];
	data.list = list;
	for (var i=0;i<20;i++){
	list.push({name:i,content:Math.random()*100});
	}
	callback(data);
	}


	// Example use:
	var destinationList = document.getElementById("dest");
	var createListElem = function(cont){
	var elem = document.createElement('li');
	var text = document.createTextNode(cont.content);
	elem.appendChild(text);
	return elem;
	};
	var mapping = Mapping (destinationList,
	createListElem,
	["list"]);
	getDataMaybeAsynchronous(mapping);
	name: Source to Dom mapping
	description: Combinator utilities for creating a callback that inserts elements into the DOM tree once a long running data retrieval operation is done.
	authors:
	- Per Fredelius
	resources:
	- http://no
	normalize_css: no