Ajax加载的数据不会更新布局

Question

I load data using ajax and populate my page using Knockout. This all works great, when I changes pages to #contacts it looks good. However, I have a problem when the #contacts page is the initial page i load. Eg if I load www.mydomain.com/#contacts , the initial page loaded is the list page, thus the ko.bindinghandlers.listview doesn't have any affect. I tried re-creating the page, but that doesn't fully work either, not all the styles are applied as it should. My list view is not just a list view, it contains a controllgroup as well, to make a list view with checkboxes.

$("#contacts").page('destroy').page();

$('#contacts').bind('pageinit', function() {
    $('ul').listview();
});

How can I load data using Ajax, append it (using ko) to my ul and have it render correctly.

This is how it looks if #contacts is NOT the initial page loaded:

This is the best result I manage to get this far, when #contacts IS the initial page loaded:

Answer 1

You need to call refresh on your listview whenever your update it using JavaScript.

$('.selector').listview('refresh');

More on the docs .

Answer 2

pageinit() probably doesn't get called when its the first load. add a console.info there to make sure... if that's the issue, then just make sure it is being called on load() or whenever you feel like it. was that it?