Jquery Mobile Listview Filter not showing

Question

I try to build a Backbone Marionette application using jQuery mobile. I'm using a Marionette.CollectionView for generating a searchable jQuery mobile listview. I show that view by calling 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");
    }
}

At first, it only showed the plain list. Because of that, I added $el.listview(). But the filter bar still doesn't show. I found a similar question which stated that the element has to be appended before .listview() is called, but I don't know when Marionette appends the $el.

When I used Backbone only, I could simply call "append(template).trigger("create")" but trigger doesn't seem to work here.

What should I do to make the filter show?

Edit: This is the listview generated by the views render-method (with added "data-role" attribute):

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

The filter bar does not show.

Answer 1

I solved the problem. You cannot create a filter bar by using the .listview() function. The only way to achieve this is to trigger the create-Event.

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

In my case, this didn't work either. The problem was that I was calling trigger("create") of the listview when I actually needed to call the trigger("create") of the PARENT element of the listview, e.g.

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

I was wondering why trigger-create worked when I had a normal Backbone-View and that was the reason.

Answer 2

When working with CollectionView or CompositeView you need to adding the child ItemView's using the appendHtml function.

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

Here's the doc https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-appendhtml

Answer 3

I think you're missing the data-role attribute from your view.

In order for the filter to work your markup for the ul elements wants to look like this.

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

At the moment your view will only be rendering this.

<ul data-filter="true">

Try adding the data-role attribute to your view.

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