nav.jsx

/** @jsx React.DOM */
'use strict';
define(['react'], function(React) {
	var NavItem = React.createClass({
		render: function() {
			return (
				<li onClick={this.handleClick} data-page={this.props.page}>{this.props.itemName}</li>
			);
		},
		handleClick: function(e) {
			console.log('NavItem.handleClick', e);
			this.props.handleIt(e);
		}
	})

	return React.createClass({
		render: function() {
			var _this = this, i = 0;
			try {
				var nodes = this.props.navItems.map(function(item) {
					++i;
					return <NavItem handleIt={_this.dinger} page={i} itemName={item} />;
				});
			} catch(e) {
				console.log('error', e);
			}
			return (
				<nav className="primary">
					<ul>
						{nodes}
					</ul>
				</nav>
			);
		},

		dinger: function(e) {
			console.log('dinger', e.target.getAttribute('data-page'));
			this.props.onClickNext(e.target.getAttribute('data-page'));
		}
	});
});