JSFiddle - React, Tailwind, and code Playground

by feronovak

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
	<div id="boxSearch"></div>
    <script type="text/template" id="tpl-search-location">
		<table>
			<tr>
				<td>Location, neighboorhood</td>
				<td><input type="text" id="location"></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="button" id="button" value="Search"></td>
			</tr>
		</table>
	</script>
    <script type="text/template" id="tpl-search-latitude">
		<table>
			<tr>
				<td>Latitude, Longitude</td>
				<td><input type="text" id="longitude"></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="button" id="button" value="Search"></td>
			</tr>
		</table>
	</script>

JavaScript

var Geo = {
	Views: {},
	Templates: {}
};

/*	TEMPLATES	*/
Geo.Templates.SearchLocation = _.template( $("#tpl-search-location").html());
Geo.Templates.SearchLatitude = _.template( $("#tpl-search-latitude").html());

Geo.Views.SearchLocation = Backbone.View.extend({
	initialize: function() {
		this.render();
	},
	el: $("#boxSearch"),
	template: Geo.Templates.SearchLocation,
	render: function() 
	{
		$(this.el).html(this.template);
	},
	events: {
		"click input[type=button]": "doSearch"
	},
	doSearch: function(e) {
		e.preventDefault();
		alert('doSearch SearchLocation');
	}
});

Geo.Views.SearchLatitude = Backbone.View.extend({
	initialize: function() {
		this.render();
	},
	el: $("#boxSearch"),
	template: Geo.Templates.SearchLatitude,
	render: function() 
	{
		$(this.el).html(this.template);
	},
	events: {
		"click input[type=button]": "doSearch"
	},
	doSearch: function(e) {
		e.preventDefault();
		alert('doSearch SearchLatitude');
	}
});

$(document).ready(function(e) {
	var searchLocation = new Geo.Views.SearchLocation();
	var searchLatitude = new Geo.Views.SearchLatitude();
});