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“）”但触发器似乎不起作用。

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

编辑：这是视图render-method生成的列表视图（添加了“data-role”属性）：

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

就我而言，这也不起作用。问题是当我实际需要调用listview的PARENT元素的触发器（“create”）时，我正在调用listview的trigger（“create”），例如。

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

我想知道为什么触发器创建在我有一个正常的Backbone-View时起作用，这就是原因。

Jquery Mobile Listview过滤器未显示

3 个答案: