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?