Demo

server_side:

<html>
	<head>
		<script>
			function f( str )
			{
				alert( str );
			}
		</script>
	</head>
	<body>
		<ul>
			<li onclick=“f(‘one’)”>one</li>
			<li onclick=“f(‘two’)”>two</li>
			<li onclick=“f(‘three’)”>three</li>
		</ul>
	</body>
</html>


client_side:

<html>
	<head>
		<script>
			// create a list object
			(function(window)
			{
				// constructor
				var list = window.List = function( str )
				{
					// save property
					this.str = str;
				};

				// methods
				list.prototype: {
					click: function(e)
					{
						alert( this.str );
					},

					render: function()
					{
						var li = $( “<li>” ).text( str );
						li.click( $.proxy( this.click, this ) );
						return li;
					}
				};
			})( window );

			// instantiate objects
			$( document ).ready( function()
			{
				var ul = $( “body > ul” );
				$.get( “/strings”, function( strings )
				{
					for( var s in strings )
					{
						var l = new List( item );
						ul.append( l.render() );
					}
				});
			});
		</script>
	</head>
	<body>
		<ul>
		</ul>
	</body>
</html>