Easier way to get proper JQM styling and functionality to dynamically generated listview ( ul / li ) ? (Source : JS/JQuery)

Easier way to get proper JQM styling and functionality to dynamically generated listview ( ul / li ) ? (Source : JS/JQuery)

Greetings.. and thank you for using your time reading my post...

Setting up a listview in the markup is easy, and looks like it should when applying the correct data-roles and styles to it...

But.. populating (databinding) a listview from javascript/jquery was more brutal than i thought it should have been...

I wonder... am i doing something terribly wrong, when ending up with the code you can see below to create the jqm listview or is this the way to do it ? I hope.. the first :)

    var listString = '<ul id="worklist" data-role="listview" data-indent="true">';
// this is a div  
$workListViewContainer = $('#worklistcontainer');
    $.each(instoreWorkList.OrderLines, function (index, value) {
        listString += '<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-count ui-btn-up-c" style="height:120px">';
        listString += '<div class="ui-btn-inner ui-li">';
        listString += '<div class="ui-btn-text" style="padding-left:10px; padding-top:10px">';
        listString += '' + this.ProductName + '';
                //listString += '<a href="#" data-icon="grid" ui-icon-shadow="none" class="ui-link-inherit" data-transition="slide">' + this.ProductName + '</a>';
                listString += '<div id="hidProductId" style="display:none">' + this.ProduktId + '</div>';
            listString += '</div>';
        listString += '<div style="clear:both; display:block; height:1px"></div>';
            listString += '<div data-role="controlgroup" data-type="horizontal" style="padding-left:5px">';
            listString += '<a data-role="button" class="minus"><img src="Content/Images/InStore_48x48_back.png" style="vertical-align:middle" /></a>';
            listString += '<input type="text" class="ui-body-c ui-corner-all ui-shadow-inset productcount" style="width:30px; height:30px; text-align:center" value="' + this.ProductCount + '" />';
            listString += '<a data-role="button" class="plus"><img src="Content/Images/InStore_48x48_forward.png" style="vertical-align:middle" /></a>';
            listString += '</div>';
        listString += '</div>';
        listString += '</li>';
    });
    listString += '</ul>';
    $workListViewContainer.html(listString);