MarionetteJS (Backbone.Marionette) Playground

A base template to use for building Backbone and Marionette applications. http://marionettejs.com

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
<h1>Collectionview incrementing className example</h1>
</br>

<div id="container"></div>
<script type="text/html" id="message-item">
<li class="item padding-15" data-message-id="<%= id %>">
	<div class="thumbnail-wrapper d32 circular bordered b-success">
		<img width="40" height="40" alt="" data-src-retina="<%= dpRetina %>" data-src="<%= dp %>" src="<%= dpRetina %>">
	</div>
	<div class="checkbox  no-margin p-l-10">
		<input type="checkbox" value="1" id="messagecheckbox-0-0">
		<label for="messagecheckbox-0-0"></label>
	</div>
	<div class="inline m-l-15">
		<p class="recipients no-margin hint-text small"><%= to %></p>
		<p class="subject no-margin"><%= subject %></p>
		<p class="body no-margin"><%= body %></p>
	</div>
	<div class="datetime"><%= time %></div>
	<div class="clearfix"></div>
</li>
</script>

JavaScript

var myjson = { "messages": [
			{
				"id": 1,
				"group": "Today April 21",
				"subject": "Walgreens Mother's Day Gift Disposition",
				"to": ["TS,IL,FIM,TM"],
				"body": "<p>As a follow up to the Friday, May 1, Field Service Organization WebEx, the following documents have been posted to The Source. The May-June Program Overview Power Point deck is also attached.</p>",
				"time": "2:33pm",
				"datetime" : "Today at 1:33pm",
				"from": "KARRI ALBERTI",
				"dp": "http://placehold.it/69x69",
				"dpRetina": "http://placehold.it/312x312"
			}, {
				"id": 2,
				"group": "Today April 21",
				"subject": "Giant Eagle FDay Grad Seasonal Aisle Direction",
				"to": ["DOUG WATSON"],
				"body": "<p>Action Required:  Please ensure that the CVS card specialists are aware that they will be  receiving  line-ordered  Frozen GW SKUs in their next everyday order and that they should display the SKUs in their core Giftwrap display.</p>",
				"time": "2:33pm",
				"datetime" : "Today at 1:33pm",
				"from": "KATHEY CHO",
				"dp": "http://placehold.it/69x69",
				"dpRetina": "http://placehold.it/312x312"
			}, {
				"id": 3,
				"group": "Yesterday April 22",
				"subject": "Hallmark employees working for 3rd party companies",
				"to": ["Walmart TS"],
				"body":"The following message has been emailed to TSs for affected stores. In the event a store does not have an assigned TS (either a vacancy or not assigned in CRM), the TM will receive the account specific email.",
				"time": "2:33pm",
				"datetime" : "Today at 1:33pm",
				"from": "KEISHA BROADWAY",
				"dp": "http://placehold.it/69x69",
				"dpRetina": "http://placehold.it/312x312"
			}, {
				"id": 4,
				"group": "Yesterday April 22",
				"subject": "HEB Greeting Card Promotion - No redemption list",
				"to": ["EILEEN PARKER"],
				"body": "<p>The field issue resolution guide and key resources document are both quick linked on the home page of the SOURCE.  These documents are updated frequently, so please...