Bind View

Instantiate a view (component) and insert into the current document.

<div>
	<div bind-view="Greeting" bind-param-name="#myName"></div>
</div>

The inner div will be replaced by the view named Greeting. Declare your views with the global dataBinder object:

dataBinder.views["Greeting"] = {
	template: createElement("<div bind-event-click='this.close()'>{{#greet+this.toTitleCase(#name)}}</div>"),
	controller: function(elem) {
		this.greet = "Hello, ";
		this.toTitleCase = function(text) {...};
		this.close = function() {elem.style.display = "none"};
	}
}

You use the bind-param directive to pass data into your view. These params actually become properties of this, so you can bind to them as #name and refer to them in your controller as this.name.

http://jsfiddle.net/ooanjhtv/1/

The bind-view directive lets you break your page into components, which is essential when developing complex apps. Normally you would define your component templates in a separate file and load them in via AJAX, how you do this is entirely up to you. But for a straightforward approach, see the "Componentized Todo List" example.