cujo-ish view/widget

_MyView.js

//MyView.js (filename above is just to sort this to top)
define([
	'wire!./myView/spec',
	'poly!poly/array' // for instance, not used in this example
],
function (spec) {
	return spec;
});

controller.js

// myView/controller.js
define({
	_onClick: function (e) {
		this.rootNode.classList.toggle(this.states.selected);
	}
});

spec.js

define({
	plugins: [
		{ module: 'wire/dom' },
		{ module: 'wire/html5Event' } // adds `on` facet plus html5's node.classList!
	],
	oocssStates: {
		selected: 'selected'
	},
	controller: { 
		module: './myView/controller',
		on: {
			rootNode: 'click:_onClick'
		},
		properties: {
			states: { $ref: 'oocssStates' }
		}
	},
	template: { module: 'text!./myView/template' },
	strings: { module: 'i18n!./myView/strings' }
});

strings.js

// myView/strings.js
define({
	greeting: 'Hello, cujo-er!'
});

template.html

<!- myView/template.html -->
<div class="myview" data-cujo-bind="rootNode"><!-- should rootNode be implicit? -->
	<p>${strings.greeting}</p>
	<p data-cujo-bind="foo"></p>
</div>

ZZZ_MyView.js

// MyView.js when concatenated together using cram.js
// cram.js needs two new features to make this work:
//     1. an option to NOT normalize module ids
//     2. an option to more easily exclude modules from the build (wire plugins, for instance)

define('./myView/controller', {
	_onClick: function (e) {
		this.rootNode.classList.toggle(this.states.selected);
	}
});

define('text!.myView/template.html', function () {
	return '<div class="myview" data-cujo-bind="rootNode"><!-- should rootNode be implicit? -->\n\t<p>${strings.greeting}</p>\n\t<p data-cujo-bind="foo"></p>\n</div>';
});

define('i18n!./myView/strings', {
	greeting: 'Hello, cujo-er!'
});

define('wire!./myView/spec', {
	plugins: [
		{ module: 'wire/dom' },
		{ module: 'wire/html5Event' } // adds `on` facet plus html5's node.classList!
	],
	oocssStates: {
		selected: 'selected'
	},
	controller: { 
		module: './myView/controller',
		on: {
			rootNode: 'click:_onClick'
		},
		properties: {
			states: { $ref: 'oocssStates' }
		}
	},
	template: { module: 'text!./myView/template' },
	strings: { module: 'i18n!./myView/strings' }
});

define(/* yes, this should stay anonymous! */ [
	'wire!./myView/spec',
	'poly!poly/array' // for instance, not used in this example
],
function (spec) {
	return spec;
});