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>

一个div包装每个li和一个额外的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。）

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

1 个答案: