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 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; 
    }
});