ampersand-grouped-collection-view

Renders a collection of items that are clustered in groups, such as how chat messages can be displayed grouped by sender.

Part of the Ampersand.js toolkit for building clientside applications.

Install

1npm install ampersand-grouped-collection-view

Example

1var View = require('ampersand-view');
2var GroupedCollectionView = require('ampersand-grouped-collection-view');
3
4
5var view = new GroupedCollectionView({
6    el: someDOMElement,
7    collection: messagesCollection,
8
9    itemView: View.extend({
10        template: '<div><p data-hook="msg-body"></p><span data-hook="msg-time"><span></div>',
11        bindings: {
12            'model.body': {
13                type: 'text'
14                hook: 'msg-body'
15            },
16            'model.timestamp': {
17                type: 'text',
18                hook: 'msg-time'
19            }
20        }
21    }),
22    groupView: View.extend({
23        template: '<div><img data-hook="avatar"/><ul data-hook="messages"></ul></div>',
24        bindings: {
25            'model.avatar': {
26                type: 'attribute',
27                name: 'src',
28                hook: 'avatar'
29            }
30        },
31        render: function () {
32            this.renderWithTemplate();
33            // The `groupEl` property is special for group views. If provided, item
34            // views will be appended there instead of on the root element for the
35            // group view.
36            this.cacheElements({
37                groupEl: '[data-hook=messages]'
38            });
39        }
40    }),
41
42    groupsWith: function (model, prevModel, currentGroup) {
43        // Used to determine when a new group is needed.
44        // Return `true` if `model` belongs to the same group
45        // as `prevModel`.
46        // The current group is also available for comparison.
47        return model.sender.id === prevModel.sender.id;
48    },
49    prepareGroup: function (model, prevGroup) {
50        // Prepare a Group model based on the Item model
51        // that triggered the group's creation.
52        // The previous group model is also provided.
53        return model.sender; 
54    }
55});