Generate dynamic Ajax controls from intuitive declarative templates.

1. Design your template (click to edit).

For more JBST syntax details, see: http://starterkit.jsonfx.net/jbst

<%@ Control Name="Foo.MyZebraList" Language="JavaScript" %>

/* private members ------------------------------------------ */

/*int*/ function digits(/*int*/ n) {
		return (n < 10) ? '0' + n : n;
	}

/* public members ------------------------------------------- */

// use the item index to alternate colors and highlight
	/*string*/ this.zebraStripe = function(/*bool*/ selected, /*int*/ index, /*int*/ count) {
		var css = [ "item" ];
		if (index % 2 === 0) {
			css.push("item-alt");
		}
		if (selected) {
			css.push("item-selected");
		}
		return css.join(" ");
	};

/*string*/ this.formatTime = function(/*Date*/ time) {
		return time.getHours() + ':' + digits(time.getMinutes()) + ':' + digits(time.getSeconds());
	};

</script>

<jbst:control data="<%= this.data.children %>">
			
			<li class="<%= Foo.MyZebraList.zebraStripe(this.data.selected, this.index, this.count) %>">
				<%= this.data.label %> (<%= this.index+1 %> of <%= this.count %>)
			</li>
		</jbst:control>

</ul>
</div>

2. Compile to JavaScript.

This produces a JavaScript object which can easily be bound to data e.g. Foo.MyZebraList.bind(data);.

Generate…

3. Download the JBST runtime.

This is the only additional script needed to dynamically bind your control in the browser. It is only needed once, no matter how many different JBST controls you create.

Full Source - 24.4 KB Compacted - 7.9 KB [ GZip - 3.0 KB ] [ Deflate - 3.0 KB ]

4. Done!

Add your JBST control script and the support script to your webpage. Binding to a JBST control is as easy as it gets. Here's an example usage:

			// get some data
			var myData = 
				{
					title: "Hello world",
					description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia consequat diam, ac auctor eros suscipit et. Donec rhoncus bibendum scelerisque.",
					timestamp: new Date(),
					children: [
						{ label: "The first item", selected: false },
						{ label: "Another child item", selected: false },
						{ label: "And again", selected: false },
						{ label: "Final item", selected: false }
					]
				};

			// randomly mark one as selected
			myData.children[Math.floor(Math.random() * myData.children.length)].selected = true;

			// bind the control to your data
			var myList = Foo.MyZebraList.bind(myData);

			// insert into the page
			document.body.appendChild(myList);

See the example in action » Get the source for this app »