Jquery Mobile Listview Фильтр, не показывающий

Question

Я пытаюсь создать приложение Марионеточной магистрали с использованием jQuery mobile. Я использую Marionette.CollectionView для создания просматриваемого списка jQuery для поиска. Я показываю этот вид, вызывая App.mainRegion.show().

return Marionette.CollectionView.extend({ 
    tagName: "ul", 
    itemView: UserItemView, 
    emptyView: NoUsersView, 
    attributes: { 
     "data-filter" : "true" 
    }, 

    onShow: function(){ 
     console.log("OnShow!"); 
     //console.log($("body").html()); 
     this.$el.listview(); 
     $.mobile.changePage("#main"); 
    } 
} 

Сначала он показал только простой список. Из-за этого я добавил $ el.listview(). Но фильтр-бар по-прежнему не отображается. Я нашел аналогичный вопрос, в котором говорилось, что элемент должен быть добавлен до вызова .listview(), но я не знаю, когда Marionette добавляет $ el.

Когда я использовал только Backbone, я мог просто называть «append (template) .trigger (« create »)», но триггер, похоже, не работает здесь.

Что делать, чтобы показать фильтр?

Edit: Это ListView генерируется рендер-метод взглядов (с добавлением атрибута «данных ролей»):

<ul data-role="listview" data-filter="true" class="ui-listview"> 
    <li class="ui-li-has-alt ui-first-child ui-last-child"> 
     <a href="#/users/details/hqpmy4j16z11bxfh9f2x" class="ui-btn"> 
      <h2>Thomas Davis</h2> 
      <div class="ui-li-aside">Age: 12</div> 
     </a> 
     <a href="#/users/edit/hqpmy4j16z11bxfh9f2x" data-icon="edit" title="" class="ui-btn ui-btn-icon-notext ui-icon-edit"></a> 
    </li> 
</ul> 

бар фильтр не показывает.

Answer 1

Я решил проблему. Вы не можете создать панель фильтров с помощью функции .listview(). Единственный способ добиться этого - вызвать событие create-Event.

$("#element").trigger("create"); 

В моем случае это тоже не сработало. Проблема заключалась в том, что я вызывал триггер («создать») списка, когда мне действительно нужно было вызвать триггер («создать») элемента PARENT списка, например.

$("#this-is-the-wrapper-of-listview").trigger("create"); 

Мне было интересно, почему trigger-create работал, когда у меня был нормальный Backbone-View, и именно по этой причине.

Answer 2

При работе с CollectionView или CompositeView вам необходимо добавить дочерний элемент ItemView, используя функцию appendHtml.

appendHtml: function (collectionView, itemView) { 
    collectionView.$el.append(itemView.el); 
} 

Вот ДоП https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-appendhtml

Answer 3

Я думаю, вы упускаете атрибут data-role с вашей точки зрения.

Для того, чтобы фильтр работал, ваша разметка для элементов ul должна выглядеть так.

<ul data-role="listview" data-filter="true"> 

На данный момент ваш взгляд будет показывать только это.

<ul data-filter="true"> 

Попробуйте добавить атрибут роли данных в свой вид.

return Marionette.CollectionView.extend({ 
    tagName: "ul", 
    itemView: UserItemView, 
    emptyView: NoUsersView, 
    attributes: { 
     "data-role" : "listview", 
     "data-filter" : "true" 
    }, 

    onShow: function(){ 
     console.log("OnShow!"); 
     //console.log($("body").html()); 
     this.$el.listview(); 
     $.mobile.changePage("#main"); 
    } 
}