ampersand-grouped-collection-view

Render the items in a collection, where items may be grouped in batches (such as a list of chats grouped by sender)

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](http://ampersandjs.com) for building clientside applications.
npm install ampersand-grouped-collection-view
var View = require('ampersand-view');
var GroupedCollectionView = require('ampersand-grouped-collection-view');
 
 
var view = new GroupedCollectionView({
    el: someDOMElement,
    collection: messagesCollection,
 
    itemView: View.extend({
        template: '<div><p data-hook="msg-body"></p><span data-hook="msg-time"><span></div>',
        bindings: {
            'model.body': {
                type: 'text'
                hook: 'msg-body'
            },
            'model.timestamp': {
                type: 'text',
                hook: 'msg-time'
            }
        }
    }),
    groupView: View.extend({
        template: '<div><img data-hook="avatar"/><ul data-hook="messages"></ul></div>',
        bindings: {
            'model.avatar': {
                type: 'attribute',
                name: 'src',
                hook: 'avatar'
            }
        },
        renderfunction () {
            this.renderWithTemplate();
            // The `groupEl` property is special for group views. If provided, item 
            // views will be appended there instead of on the root element for the 
            // group view. 
            this.cacheElements({
                groupEl: '[data-hook=messages]'
            });
        }
    }),
 
    groupsWithfunction (modelprevModelcurrentGroup) {
        // Used to determine when a new group is needed. 
        // Return `true` if `model` belongs to the same group 
        // as `prevModel`. 
        // The current group is also available for comparison. 
        return model.sender.id === prevModel.sender.id;
    },
    prepareGroupfunction (modelprevGroup) {
        // Prepare a Group model based on the Item model 
        // that triggered the group's creation. 
        // The previous group model is also provided. 
        return model.sender; 
    }
});