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

我刚刚找到了解决方案，只需创建一个 new out side 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>

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

1 个答案: