Listview 列表视图css不呈现jquery mobile

我正在使用jquerymobile、phone gap和backbone.js制作一个应用程序。在本文中，我动态创建页面并将其附加到html页面的body元素。我还在为特定页面动态创建列表视图。但是，列表视图仅显示li标记的普通链接。下面是我的视图代码

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;
}});

我的模板看起来像这样

<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>

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

借来的伙伴

用户列表项

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

---

您需要刷新列表视图

因此，在附加列表项之后，需要刷新，如下所示

<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>

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

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

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

您需要刷新列表视图

因此，在附加列表项之后，需要刷新，如下所示

<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>

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

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

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

您可能需要在pageshow事件中调用listview上的refresh方法，或者如果是第一次创建它，您可能需要调用create方法

比如说

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

---

您可能需要在pageshow事件中调用listview上的refresh方法，或者如果它是第一次创建，您可能需要调用create方法

比如说

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

---

在“导航”到页面之前，需要确保已调用render（）

这样jquerymobile就有时间在显示内容之前对其进行标记

---

我通过使用pub/sub委托呈现和导航事件来解决这个问题，因此它们会在正确的时间（数据到达后）被调用，这消除了您面临的竞争条件问题。

您需要确保在“导航”到页面之前调用render（）

这样jquerymobile就有时间在显示内容之前对其进行标记

---

我通过使用pub/sub委托渲染和导航事件来解决这个问题，因此它们会在正确的时间（数据到达后）被调用，这消除了您面临的竞争条件问题。

如果样式不适用于特定的li元素。请检查与li关联的类。把它也弄干净

以下面的格式签出

---

$（#userList.userListItem）.listview（“刷新”）

如果样式不适用于特定的li元素，请检查与li关联的类。把它也弄干净

以下面的格式签出

---

$（#userList.userListItem）.listview（“刷新”）

不执行$content.find（“：jqmData（role=listview）”）.listview（'refresh'）；工作？不是同样的问题。我不明白，因为标题样式很好。我也可以看到列表视图的边框，但是里面的元素没有格式化。你能发布

目录.视图.UserListView

代码吗？我用UserListViewok更新了代码，谢谢。问题可能出在

UserListItemView

模板上。是否使用DOM检查器？$content.find（“：jqmData（role=listview）”）.listview（'refresh'）；工作？不是同样的问题。我不明白，因为标题样式很好。我也可以看到列表视图的边框，但是里面的元素没有格式化。你能发布

目录.视图.UserListView

代码吗？我用UserListViewok更新了代码，谢谢。问题可能出在

UserListItemView

模板上。你使用DOM检查器吗？我在哪里添加它？？在我将页面附加到正文之后？我在哪里添加该页面？？在我将页面附加到正文之后？