CODEWITHSUNDEEP
listviewjquery-mobilecordovabackbone.js
VBK
VBK

Reputation: 1555

List view css not rendering jquery mobile

I am making an application using jquery mobile, phone gap and backbone.js. In this I am dynamically creating pages and appending it to the body element of the html page. I am also dynamically creating a list view for a particular page. However the list view just shows plain links for the li tags. The code for my view is below

directory.views.UserListPage = Backbone.View.extend({

 initialize: function() {
    this.template = _.template(directory.utils.templateLoader.get('user-list-page'));
},

 events:{ "click .add-button": "addButton_clicked"
},
render: function(eventName) {
    $(this.el).html(this.template(this.model.toJSON()));
    this.listView = new directory.views.UserListView({el: $('ul', this.el),model: this.model});
    this.listView.render();

    $content = $(this.el).children(":jqmData(role=content)");
  $(this.el).appendTo($("body")).page();

    $content.find(":jqmData(role=listview)" ).listview();
    return this;
},

addButton_clicked: function(event) {
console.log("clicked");
    event.preventDefault();
   directory.app.navigate("addUser", {trigger: true});
}});

directory.views.UserListView = Backbone.View.extend({


initialize: function() {
    this.model.bind("reset", this.render, this);
},

render: function(eventName) {
    $(this.el).empty();
    _.each(this.model.models, function(user) {
        $(this.el).append(new directory.views.UserListItemView({model: user}).render().el);
    }, this);
    return this;
}});

directory.views.UserListItemView = Backbone.View.extend({

tagName: "li",

events:
{
"click" : "borrowHistory"
}
,
initialize: function() {
    this.template = _.template(directory.utils.templateLoader.get('user-list-item'));
},

render: function(eventName) {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
} ,
borrowHistory: function(event) {



    var children = $(event.currentTarget).children();
    var attribute = children[0].dataset.id;
   var url = "#/rs/" + attribute +  "/borrowHistory";

   directory.app.navigate(url, {trigger: true});
   return false;
}});

My template looks like this

<div data-role="header" data-theme="e">
    <a href="#addUser" data-role="button" data-icon="plus" >Add</a>
    <h1>Borrow Mate</h1>

  </div>
  <div id="listUser" data-role="content"  >
  <div id="listcontent">
     <ul  id="userList" data-role="listview" data-inset="true" data-theme="e" data-divider-theme="e" data-count-theme="e"> </ul>
    </div>
  </div>

User list item

<div class="userListItem" data-id = "<%= id %>" >
    <b><%= Name %></b>
    <span class="ui-li-count"><%= Credits %></span>
</div>

Added a screenshot of my output

Upvotes: 2

Views: 4256

Answers (4)

Suresh
Suresh

Reputation: 923

If style is not applying for particularly li elements .Check the class associated to li. Make that too refresh.

check out in below format

$(#userList .userListItem).listview("refresh");

Upvotes: 0

rekarnar
rekarnar

Reputation: 463

You need to make sure render() is called before you 'navigate' to your page.

This way jQuery Mobile has time to mark-up your content before it is displayed.

I got around this issue by delegating the render and navigation events with pub/sub, so they get called at the right time (after the data arrives), this eliminates the race condition issue you are facing.

Upvotes: 0

Jack
Jack

Reputation: 11003

You may need to call the refresh method on the listview in the pageshow event, or if it's the first time it's being created you may need to call the create method.

For example

$(document).delegate('#yourPage', 'pageshow', function (event, ui) {
        $('#userList').listview('refresh');
          //or surround in a try catch block
       /* try {
           $('#userList').listview();
          } catch {
           $('#userList').listview('refresh');
         }*/
    });

Upvotes: 0

Phill Pafford
Phill Pafford

Reputation: 85378

You need to refresh the listview

So After you append the list items you need to refresh, like this

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

Using the id attribute of the template you have provided

<ul id="userList" data-role="listview" data-inset="true" data-theme="e" data-divider-theme="e" data-count-theme="e">
</ul>

Upvotes: 4

Related Questions