Listview looks weird - jQuery

问题

I'm having some trouble with my ListView. It doesn't have the nice look that jQuery offers, but just a plain list and I don't have any idea how this would come.

This is the code (HTML)

<div data-role="page" id="home">
    <div data-role="header">
        <h1>Bestelling</h1>
        <a class="ui-btn-right" href="#toevoegen">+</a>
    </div>

    <div data-role="content">
        <ul data-role="listview" data-inset="true" id="bestellingLijst">
            <!-- Hier komt de bestelling -->
        </ul>
    </div>
</div>

And here is the code where I add a new <li> to the listview

$("#bestellingLijst").append("<li>" + naam + ' - ' + prijs + "</li>");

Can anybody help me? Thanks!

回答1:

Solution

Sometimes, its required to use promise to make listview("refresh") wait till the append is done, then call a success handler which takes runs the refresh on the listview.

$("#bestellingLijst").append("<li>" + naam + ' - ' + prijs + "</li>").promise().done( function(){
    $(this).listview('refresh');
});

If you're calling append in a loop, it might be better to store it in a variable first, then append it all into #bestellingLijst :

var i = 0;
var li = "";
for(; i< array.length; i++)
{
  //concat to string
  li += "<li>" + naam + ' - ' + prijs + "</li>";
}
$("#bestellingLijst").append(li).promise().done( function(){
      $(this).listview('refresh');
});

Demo

http://jsfiddle.net/hungerpain/CdQTW/

More info on the methods used

listview("refresh")

• Docs : http://api.jquerymobile.com/listview/#method-refresh
• What it does : refreshes the markup of dynamically created uls which have data-role set to listview.

promise

• Docs : http://api.jquery.com/promise/
• What it does : Makes sure that all actions of a certain type bound to the collection, queued or not, have finished.

done

• Docs : http://api.jquery.com/deferred.done/
• What it does : Add handlers to be called when the promise is resolved.

Extras

And, I hope you're calling this refresh in a page event method of jQM like this,if you're running this on load of the page :

$(document).on("pageinit", "#home", function () {
  //append to ul
  //refresh the listview
}); 

回答2:

If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added.

$('#bestellingLijst').listview('refresh');

来源：https://stackoverflow.com/questions/17407561/listview-looks-weird-jquery