Adhesive JS

Adhesive is like Razor (C# intermingled with HTML) but for the client.

The Razor view engine is brilliant because it requires virtually zero learning curve. If you know C# and you know HTML, you basically know Razor.

Angular and Handlebars and Knockout are all great, but they require you to do things the "Angular" way, or the "Handlebars" way, or the "Knockout" way. And the learning curve for each of them is considerable.

Adhesive is different

Do you know Javascript? Do you know HTML? Then you pretty much already know Adhesive

Simple example

Imgaine you have a JSON model as follows:

var myFamilyModel = 
	[
		{
			Gender: 'M',
			Name: 'Stephen',
			Age: 35,
			FavoriteColor: 'lightblue',
			FavoriteSport: 'tennis'
		},
		
		{
			Gender: 'F',
			Name: 'Anna',
			Age: 7,
			FavoriteColor: 'pink',
			FavoriteSport: 'gymnastics'
		},
		
		{
			Gender: 'M',
			Name: 'Julian',
			Age: 1.5,
			FavoriteColor: 'yellow',
			FavoriteSport: 'being crazy'
		},
		
		{
			Gender: 'F',
			Name: 'Emily',
			Age: 35,
			FavoriteColor: 'yellow',
			FavoriteSport: 'running'
		},
		
		{
			Gender: 'M',
			Name: 'Jonah',
			Age: 4,
			FavoriteColor: 'red',
			FavoriteSport: 'being a "monster"'
		}
	];

Now suppose you want to use this model in rending an HTML "View". Easy peasy lemon squeezy.

	<div id="myFamily" model="family">
		<h1>This is my family!</h1>
		
		<ul>
			#{{
			var i, len = family.length;
			for (i = 0; i < len; i++)
			{
				var member = family[i];
				<li style="background:{{member.FavoriteColor}};margin:8px 0;padding:4px;">
					<div>Name: {{member.Name}}, Age: {{member.Age}}</div>
					<span>Enjoys: {{member.FavoriteSport}}</span>
				</li>
			}
			}}
		</ul>
	</div>

See what I did there? Similarly to how in Razor, you just type an @ sign and then start writing C#, in Adhesive you do something very similar. You simply start a Javascript code block by typing: #{{

Now Adhesive is a little different, because it requires both the starting symbol: #{{ and the ending symbol }}. But beyond that, there isn't much to know. Write Javascript as you normally would. When you get to a point where you need to output HTML, just write some HTML! And if you're inside and HTML tag and want to output a Javascript expression, just wrap the expression in opening {{ and closing }}.

That's it!

You know know Adhesive.

Below this button is an element: <div id="output"></div>

The following code will compile the view above and pass in the myFamilyModel model to it

var outputContainer = document.getElementById('output');
var familyElement = document.getElementById('myFamily');
var view = Adhesive.compileView(familyElement);
outputContainer.innerHTML = view.asHtml(myFamilyModel);