Jquery Mobile Listview过滤器未显示

Question

我尝试使用 jQuery mobile 构建一个 Backbone Marionette 应用程序。 我正在使用 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")" 但触发器似乎在这里不起作用。

我应该怎么做才能使过滤器显示？

编辑：这是视图渲染方法生成的列表视图（添加了“数据角色”属性）：

<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

使用 CollectionView 或 CompositeView 时，您需要使用 appendHtml 函数添加子 ItemView。

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

这是文档https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-appendhtml

Answer 2

我认为您缺少 data-role 属性。

为了让过滤器起作用，你的 ul 元素的标记希望看起来像这样。

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

目前你的视图只会渲染这个。

<ul data-filter="true">

尝试将 data-role 属性添加到您的视图中。

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

Answer 3

我解决了这个问题。您不能使用 .listview() 函数创建过滤器栏。 实现这一点的唯一方法是触发 create-Event。

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

就我而言，这也不起作用。问题是当我实际需要调用列表视图的父元素的触发器（“创建”）时，我正在调用列表视图的触发器（“创建”），例如

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

我想知道为什么当我有一个正常的 Backbone-View 时 trigger-create 会起作用，这就是原因。