JSFiddle - React, Tailwind, and code Playground

by BorisMoore

HTML

<script src="http://borismoore.github.io/jsviews/jsrender.js"></script>
<script src="http://borismoore.github.io/jsviews/jquery.observable.js"></script>
<script src="http://borismoore.github.io/jsviews/jquery.views.js"></script>
<link rel="stylesheet" href="http://borismoore.github.io/jsviews/demos/resources/demos.css">
<link rel="stylesheet" href="http://borismoore.github.io/jsviews/demos/resources/masterdetail2.css">
<div id="movieList">xxxx</div>

<script id="movieTemplate" type="text/x-jsrender">
	<table>
		<thead><tr><th>Title</th></tr></thead>
		<tbody class="movies">
			{^{for movies}}
				<tr class="hover" data-link="css-background-color{:~bgColor()}">
					<td>
						{^{>title}}
					</td>
				</tr>
			{{/for}}
		</tbody>
	</table>

	<div class="detail">
		{^{for movies[selectedIndex]}}
			<div>
				<div class="title">{^{>title}}</div>
			</div>
		{{/for}}
	</div>
</script>

JavaScript

var movies = [
			{
				title:"Meet Joe Black"
			},
			{
				title:"Eyes Wide Shut"
			}
		],
		app = {
			selectedIndex: null,
			movies: movies,
			select: function select(index) {
				if (this.selectedIndex !== index) {
					$.observable(this).setProperty("selectedIndex", index);
				}
			}
		};

	$.templates({
		movieTmpl: {
			markup: "#movieTemplate",
			helpers: {
				bgColor: bgColor,
			}
		}
	});

	function bgColor() {
		return (this.ctx.root.selectedIndex === this.index) ? "yellow" :"#fdfdfe";
	}
	bgColor.depends = "~root.selectedIndex";

	$.link.movieTmpl("#movieList", app)
		.on("click", ".movies tr", function() {
			app.select($.view(this).index);
		});