Вопрос по jquery-mobile, listview, cordova, backbone.js – Просмотр списка css не рендеринг jquery mobile

2

Я делаю приложение, используя jquery mobile, разрыв телефона и backbone.js. В этом я динамически создаю страницы и добавляю его к элементу body html-страницы. Я также динамически создаю представление списка для определенной страницы. Однако в виде списка просто отображаются простые ссылки на теги 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>

Элемент списка пользователей

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

Added a screenshot of my output

Не могли бы вы опубликоватьdirectory.views.UserListView код? theotheo
Имеет ли $ content.find (& quot;: jqmData (role = listview) & quot;) .listview (& quot; refresh & apos;); Работа? gmh04
нет такой же проблемы. Я не понимаю, потому что заголовок оформлен хорошо. Я также могу видеть границу представления списка, но элементы внутри не отформатированы. VBK
я обновил код с UserListView VBK
хорошо спасибо. возможно проблема вUserListItemView шаблон. Вы используете инспектора DOM? theotheo

Ваш Ответ

4   ответа
0

Если стиль не применяется для особенно элементов li. Проверьте класс, связанный с li. Сделайте это тоже освежить.

проверить в формате ниже

$ (# userList .userListItem) .listview (& quot; refresh & quot;);

0

Вам может потребоваться вызвать метод refresh для просмотра списка в событии pagehow, или, если он создается в первый раз, вам может потребоваться вызвать метод 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');
         }*/
    }); 
это также не работает. VBK
4

Вам необходимо обновить просмотр списка

Итак, после того, как вы добавите элементы списка, вам нужно обновить, как это

$('#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>
где я могу добавить это в ?? после того как я добавлю страницу в тело? VBK
все еще не работает. так же, как и выше. VBK
да, после того как вы добавили список на страницу, обновите
0

Вы должны убедиться, что render () вызывается до того, как вы перейдете "перейти"; на вашу страницу.

Таким образом, у jQuery Mobile есть время для разметки вашего контента перед его отображением.

Я обошел эту проблему, делегировав события рендеринга и навигации с pub / sub, чтобы они вызывались в нужное время (после получения данных), это устраняет проблему состояния гонки, с которой вы сталкиваетесь.

Похожие вопросы