Sortable, filterable, user list in backbone marionette?

Question

See how nice and elegant this filtered list is:

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

Seems very simple. Just need a simple unordered list and a little JQuery. Piece of cake right? How do you do that with a collection in backbone marionette?

I have a marionette chat app and would like my userlist to look and function like that. But when I say:

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

     App.userListRegion.show(view);

I don't get a simple unordered list in my html output. I can't seem to make one happen no matter the tagName or el combinations I try in my item and collection views. Instead, I get output like this from my 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>

A div wrapping each li and an extra li to boot for each user in the collection.

I get that backbone wants each view in its own element. But how do I produce the effect above if I can't produce a simple unordered list like:

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

Can't I make a list like that from my item view and collection view?

Looking around I see people complaining about the extra div's and li's. Looking around I also see that filtering and sorting backbone collections seems to be a nightmare. There are so many posts on them. I see Derek Bailey's collection level filtering proposal at:

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

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

I've got a few hours in and still can't make it work with my user list. And even if I did, it seems you have to type the whole name and leave the input field completely to get any filtering action. I like the result at the link up top. Smoother and more useful a keystroke at a time. And seemingly not much code to it. I'm just not wrapping my brain around how to achieve it in backbone marionette. I have to be missing something simple. Does anybody have a direction they can suggest here?

David Sulc David Sulc · Accepted Answer · 2013-10-01T15:44:50

Here some info that should get you to solve the issue:

you can use a comparator (http://backbonejs.org/#Collection-comparator) to sort the collection by name
you can use tagName etc to generate the HTML output you want, see this blog post: http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/
you can define a filtered collection as I did in my book, see here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/common.js (inspired by Derick's work you linked)

Then, you want to filter the collection (e.g.) on the input box's "change" event. Marionette will take care of redisplaying the filtered models. (See also https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L38 from the app developed in the book, with a live example here.)

Sortable, filterable, user list in backbone marionette?

1 Answers