JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="text/template" id="grocery-template">
	<% _.each( groceries, function( grocery ) { %>
		<li>
			<%= grocery.name %>
			<button data-id="<%= grocery.id %>">Remove</button>
		</li>
	<% }); %>
</script>

<ul id="grocery-list"></ul>

JavaScript

var Grocery = Backbone.Model.extend({}),
	GroceryList = Backbone.Collection.extend({
		model: Grocery
	}),
	GroceryView = Backbone.View.extend({
		template: _.template( $( "#grocery-template" ).html() ),
		el: "#grocery-list",
		events: {
			"click button": "remove"
		},
		render: function() {
			this.$el.html( this.template({ groceries: this.model.toJSON() }));

			this.$el.find( "button" ).button({
				icons: { primary: "ui-icon-closethick" },
				text: false
			});
		},
		remove: function( event ) {
			var grocery = this.model.get( $( event.currentTarget ).attr( "data-id" ) );
			this.model.remove( grocery );
			this.render();
		}
	});

new GroceryView({
	model: new GroceryList([
		new Grocery({ id: 1, name: "Apples" }),
		new Grocery({ id: 2, name: "Bananas" }),
		new Grocery({ id: 3, name: "Peanut Butter" }),
		new Grocery({ id: 4, name: "Bread" }),
		new Grocery({ id: 5, name: "Milk" })
	])
}).render();