Supporting KnockoutJS

Declare an enhance handler

First implement the handler.

function enhance_knockout(el,role,config,context)
{
	var template = Resolver("page::templates","null")([config.contentTemplate]);
	var modelClass = global(config.model,"undefined");
	if (template && modelClass) {
		var content = template.content.cloneNode(true);
		el.appendChild(content);

		var model = new modelClass();
		ko.applyBindings(model,el);
		return model;
	}
	return false;
}

Then declare it,

Resolver("page").declare("handlers.enhance.knockout", enhance_knockout);

An element can now be enhanced specifying model and contentTemplate.

<div role="knockout" data-role="'model':'MyModel','contentTemplate':'#my-template'">
</div>

This will instantiate the constructor MyModel and put the #my-template in the element, and apply the bindings to the HTML.

Enable the role

Make sure knockout is listed in the meta tag.

<meta content="knockout" name="enhanced roles">