jQuery Mobile, KnockoutJS, Collapsible

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div data-role="page" id="p1"> 
    <div  data-role="header"><h1>Test</h1></div> 
    
    <div  data-role="content">
        
        <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
            <!-- ko foreach: collection -->
            <div data-role="collapsible">
                <h3><span data-bind="text: caption"></span></h3>
                <span>TODO</span>
            </div>
            <!-- /ko -->
        </div>
    </div> 
</div>

JavaScript

window.viewModel = (function (ko) {

	var collection = ko.observableArray();

    var initialize = function() {
        // Fetch data from web service...
        collection.push({caption: 'Test1'});
        collection.push({caption: 'Test2'});
        collection.push({caption: 'Test3'});
    };
    
	return {
		collection: collection,
        initialize: initialize
	};

})(ko);

// Initiate the Knockout bindings
$(document).ready(function() {
	ko.applyBindings(window.viewModel);
    window.viewModel.initialize();
});