未呈现jQuery Mobile的列表视图的CSS

问题描述

限时删除！！

我正在使用jquery手机，电话差距，Backbone.js的应用程序。在此，我动态创建的网页和追加到HTML页面的主体元素。我还动态创建一个特定页面的列表视图。然而，列表视图只是显示了李标签平原链接。在code代表我的观点是低于

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>

用户列表项

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

推荐答案

您需要刷新列表视图

• http://jquerymobile.com/demos/1.1.0/docs/lists/lists-methods.html

所以，当你添加你需要刷新列表项，像这样

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

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

使用您所提供的模板的id属性

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>

这篇关于未呈现jQuery Mobile的列表视图的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..