对ribs.js集合的项目进行分区（用于分组渲染）

Question

Let's say, I have a backbone.js model named Item that is stored in an ItemCollection . Given that Item has an attribute date , what would be the best approach to partition ItemCollection so that all items sharing the same date end up in the same partition?

Ultimately, the partitioned data structure is supposed back a (backbone.js) view that is supposed to render the items grouped by date.

What would be the best approach for this?

So far I considered

1. dynamically extracting the partitions when the index view is rendered, but that would probably break the elegance of backbone's event-based mechanism to render collection / model updates.

2. representing each grouping header as an instance of a Header model and attaching a collection with its partition to it. I would somehow need to keep the partitions attached to the Header instances in sync with the main ItemCollection , but that's probably manageable through backbone's eventing mechanism.

Would any of these approaches make sense? Any other ideas?

PS: The grouping structure does not exist in my backend data model (and I would like to avoid introducing it), so this is some mapping that needs to happen on the fly on the client side

Answer 1

It seems like a hybrid of your two options would be workable. I would probably approach this as follows:

1. Instead of Header , you can have an ItemGroup model (a little more descriptive) that renders the Item s inside of its collection , which would be a partition of the larger ItemCollection .
2. The partitioning itself can be done when you render the parent view, which I'll call AppView . In AppView#render , partition the data as you want. (You didn't explicitly ask how to partition the data, but you can use Underscore to do that in a few lines of code.)
3. Bind AppView#render to the add and remove event of ItemCollection , so that whenever a new item is added, the partitions re-render themselves.