jQuery Mobile可折叠面板和KNockjs可观察数组

Question

有人能帮我弄清楚为什么我的可折叠面板无法展开吗？我使用jquery mobile的html标记似乎正在工作。数据通过foreach循环绑定到可折叠集，但面板不会展开。

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

我刚刚找到了解决方案，只需创建一个新的外部div，然后将foreach放入该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>