jQuery Mobile collapsible panel and KNockjs observable array

Question

Can someone help me to figure out why my collapsible panel won't expand? My html markup with jquery mobile appears to be working. The data gets bound to the collapsible set via a foreach loop, but the panels will not expand.

html:

<div data-role="collapsible-set" class="ui-block-a" data-bind="foreach: opportunityData"> 
    <div data-collapsed="true" data-role="collapsible" >
        <h3>
            <span data-bind="text: name" />
        </h3>
        <p data-bind="text: company" />
    </div>
</div>

JS:

function OpportunityViewModel() {

        var self = this;
        self.opportunityData = ko.observable([]);

        $.ajax({
            url: 'url....',
            type: 'GET',
            async: true,
            cache: false,
            crossDomain: true,
            dataType: 'jsonp',
            success: function (data) {
                self.opportunityData(data)
            },
            error: function (jqXHR, textStatus, ex) {
                alert(textStatus + "," + ex + "," + jqXHR.responseText);
            }
            }); //end ajax call
        }; //end viewmodel       

        ko.applyBindings(new OpportunityViewModel());           
    });

Answer 1

I just found the solution, just create a new out side div then put foreach in that div:

<div data-bind="foreach: opportunityData">
   <div data-role="collapsible-set" class="ui-block-a" > 
       <div data-collapsed="true" data-role="collapsible" >
           <h3>
               <span data-bind="text: name" />
           </h3>
           <p data-bind="text: company" />
       </div>
   </div>
</div>