Knockout collapsible test with JQMobile

Tests binding a template to generate a collapsible-set. The first set is a static collapsible set. The second is bound and generated from a template. Note that the H3 element is duplicated (once in the collapsible part, and again in the header.

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.js"></script>


       <div data-role="page" data-theme="c">

  <div data-role="header">
    <h1>Issue template</h1>
  </div><!-- /header -->
               <div data-role="collapsible-set">
                   
                   <div data-collapsed="true" data-role="collapsible" div data-content-theme="c">
                       <h3>Stuff</h3>
                       <p>Test</p>
                   </div>  
                   <div data-collapsed="true" data-role="collapsible" div data-content-theme="c">
                           <h3>More Stuff</h3>
                           <p>Test</p>
                   </div>    
                   
                   <div><span>seperator</span></div>
                   
                   <div data-role="collapsible-set" data-bind="foreach: people">
                   <div data-collapsed="true" data-role="collapsible">
                       <h3 data-bind="text: name"></h3>
                       <p>fax: <span data-bind="text: fax"></span></p>
                   </div>  

        </div><!-- /page -->

JavaScript

var viewModel = {
    people: ko.observableArray([
        {name: "bob", fax: "888-111-1111"},
        {name: "steve", fax: "888-222-2222"},
        {name: "tom", fax: "888-333-3333"}
    ])
}
ko.applyBindings(viewModel);
$('div[data-role="collapsible"]').collapsible();
$('div[data-role="page"]').trigger('create');