Question

JQM listview get populated as with the data with no issue as expected, but i cant get it rendered with JQM styles. could any one can help me with this issue.

I have tried with listview(), listview(“refresh”), trigger(“create”) none of them did work

var ProfessionsModel = function() {
    var self = this;
    self.professionDetails = ko.observableArray([]);
    self.getProfessionDetails=function(){
        var rest = new RestService('${pageContext.request.contextPath}/rest/profession/designations');
        rest.findAll(function(data) {
            $.each(data, function(index, value){
                self.professionDetails.push(value);
            });
        });
    };

    self.removeProfessionDetails= function(){
        self.professionDetails.removeAll();
    };

};

var pm = new ProfessionsModel();

$('#profession').live('pagecreate', function(event) {
    ko.applyBindings(pm, this);
});

$('#profession').live('pagebeforeshow', function(event) {
    pm.removeProfessionDetails();
});

$('#profession').live('pageshow', function(event) {
    pm.getProfessionDetails();
    $('#profession').find("ul").listview();
    $('#profession').find("ul").listview("refresh");
});

Answer 1

You are doing it in a wrong moment. You want believe how jQM is picky about a right moment.

var ProfessionsModel = function() {
    var self = this;
    self.professionDetails = ko.observableArray([]);
    self.getProfessionDetails=function(){
        var rest = new RestService('${pageContext.request.contextPath}/rest/profession/designations');
        rest.findAll(function(data) {
            $.each(data, function(index, value){
                self.professionDetails.push(value);
            });
            $('#profession').find("ul").listview();
            $('#profession').find("ul").listview("refresh");                
        });
    };

    self.removeProfessionDetails= function(){
        self.professionDetails.removeAll();
    };

};

jQM trigger refresh will brake if not executed after content has been appended, hence refresh after $.each part.