MarionetteJS JQM Collapsible Demo

Example on how to render JQM Collapsible sets dynamically. http://marionettejs.com

by puleos

HTML

<!-- 
External Resources (need to do it this way to ensure proper mobileinit binding) 
http://api.jquerymobile.com/global-config/ -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//  This allows backbones router to handle hash changes. Must be before jqm!
$(document).bind("mobileinit", function () {
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.marionette/master/lib/backbone.marionette.js"></script>

<!-- Loading page to show while the app bootstraps -->
<div data-role="page" id="loading-page">
    <div data-role="header">
		&nbsp
	</div>
    <div data-role="content">
		 <h1>Loading</h1>
	</div>
    <div data-role="footer">
		&nbsp
	</div>   
</div>

<!-- Results Page -->
<div data-role="page" id="results-page">
    <div data-role="header">
		<h1>Backbone Marionette + JQM</h1>
	</div>
    <div data-role="content" id="result-content">
    
    </div>
    <div data-role="footer">
		<h4>Collapsible Set Demo</h4>
	</div>
</div>

<!-- Templates -->
<script type="text/html" id="result-container-template">
    <button type="button" data-icon="gear" data-theme="b" data-iconpos="right" data-mini="true" data-inline="true" id="add">Add</button>
    <button type="button" data-icon="gear" data-theme="b" data-iconpos="right" data-mini="true" data-inline="true" id="route-add">Add via Router</button>
    <div id="result-list" data-role="collapsible-set" data-theme="c" data-content-theme="d" ></div>
</script>
        
<script type="text/html" id="result-template">
      <h3><%=name%></h3>
      <p><%=description%></p> 
      <a...

JavaScript

var App = new Marionette.Application();

App.addRegions({
    "resultContent": "#result-content"
});

App.on("initialize:after", function() {
	Backbone.history.start();
});

App.module("MobileModule", function(Mod, App, Backbone, Marionette, $, _){
    var resultsCollection = new Backbone.Collection([
        {name: "Result 1", 
         description: "Description1", 
         link: "Link1"},
        {name: "Result 2", 
         description: "Description2", 
         link: "Link2"}
    ]);
    
    var ResultItemView = Marionette.ItemView.extend({
        template: "#result-template",
        onRender: function() {
          this.$el.attr("data-role", "collapsible");          
        }
    });
    
    var ResultCompositeView = Marionette.CompositeView.extend({
        itemView: ResultItemView,
        itemViewContainer: "#result-list",
        template: "#result-container-template",
        events: {
            "click #add": "addResult",
            "click #route-add" : "routeAdd"
        },
        addResult: function() {
            var i = this.collection.length + 1;
            this.collection.add({name: "Result " + i, 
                                 description: "Description " + i,
                                 link: "Link"+i});
            this.refreshUI();
        },
        routeAdd: function() {
            var i = this.collection.length + 1;
            Backbone.history.navigate("addResult/" + "Router Result " + i + 
                                      "/" + "Link" + i + 
                                      "/" + "Description" + i, true);   
        },
        refreshUI : function() {
             $( "#result-list" ).collapsibleset("refresh");   
        }
    });
                
    // Define a controller to run this module
    // --------------------------------------
    var Router = Marionette.AppRouter.extend({
		appRoutes: {
            "addResult/:name/:link/:desc": "addResult"
		},
	});
        
    var Controller =...