jQuery Mobile with KnockoutJS ListView Issue

问题:

This example of what I am trying, the listview doesn't end up with nice looks,

Can anyone please suggest what I am doing wrong. this is happening specifically on data-inset=true.

http://jsfiddle.net/xQ9Uu/1/

if I set like this, its ok but its not really the list.

<ul id="alarmslist" data-bind="foreach: days" data-role="listview">

making the data-inset true breaks the design.

 <ul id="alarmslist" data-bind="foreach: days" 
data-inset="true" data-role="listview">

Thanks In Advance.

回答1:

Refreshing the list view after update should solve your problem. For that you can use a custom binding:

ko.bindingHandlers.jqmRefreshList = {
    update: function (element, valueAccessor) {
        ko.utils.unwrapObservable(valueAccessor()); // make this update fire each time the array is updated.
        $(element).listview("refresh")
    }
};

And in the HTML:

<ul id="alarmslist" data-bind="foreach: days, jqmRefreshList: days" data-inset="true" data-role="listview">

Here is the working fiddle: http://jsfiddle.net/xQ9Uu/44/