骨干木偶中的可排序，可过滤的用户列表？

Question

看看这个过滤后的列表是多么的漂亮和优雅：

http://kilianvalkhof.com/uploads/listfilter/#/united-kingdom/

看起来很简单。只需要一个简单的无序列表和一点 JQuery。小菜一碟吧？你如何用骨干木偶的收藏来做到这一点？

我有一个木偶聊天应用程序，并且希望我的用户列表具有这样的外观和功能。但是当我说：

     var view = new UserListView({
                    collection: collConUsers
                });

     App.userListRegion.show(view);

我的 html 输出中没有简单的无序列表。无论我在项目和集合视图中尝试使用 tagName 或 el 组合，我似乎都无法实现。相反，我从我的 CollectionView 中得到这样的输出：

    <div id="divusers">
        <div>
            <div>
                <li id="1">Rob Jones</li>
                <li></li>
            </div>
            <div>
                <li id="2">Steve Smith</li>
                <li></li>
            </div>
        </div>
    </div>

包装每个 li 的 div 和一个额外的 li 用于引导集合中的每个用户。

我知道主干希望每个视图都有自己的元素。但是如果我不能产生一个简单的无序列表，我该如何产生上面的效果：

      <ul id="users">
            <li id="1">Rob Jones</a></li>
            <li id="2">Steve Smith</li>
      </ul>

我不能从我的项目视图和集合视图中创建一个这样的列表吗？

环顾四周，我看到人们抱怨多余的 div 和 li。环顾四周，我还发现过滤和排序主干集合似乎是一场噩梦。他们有很多帖子。我在以下位置看到了 Derek Bailey 的集合级别过滤提案：

https://github.com/marionettejs/backbone.marionette/issues/183

http://jsfiddle.net/derickbailey/7tvzF/

我已经有几个小时了，但仍然无法使其与我的用户列表一起使用。即使我这样做了，您似乎也必须输入整个名称并完全离开输入字段才能获得任何过滤操作。我喜欢顶部链接的结果。一次击键更流畅，更有用。而且似乎没有多少代码。我只是没有思考如何在骨干木偶中实现它。我必须缺少一些简单的东西。有人可以在这里建议方向吗？

Answer 1

这里有一些信息可以帮助您解决问题：

• 您可以使用比较器 (http://backbonejs.org/#Collection-comparator) 按名称对集合进行排序
• 你可以使用tagName等来生成你想要的HTML输出，见这篇博文：http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/
• 您可以像我在 my book 中所做的那样定义过滤集合，请参阅此处：https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/common.js（灵感来自您链接的 Derick 的工作）

然后，您想在输入框的“更改”事件上过滤集合（例如）。 Marionette 将负责重新显示过滤后的模型。 （另请参阅本书中开发的应用程序中的https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L38，并附有一个现场示例here。）