node package manager


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


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'
        render: function () {
            // 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. 
                groupEl: '[data-hook=messages]'
    groupsWith: function (model, prevModel, currentGroup) {
        // 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 ===;
    prepareGroup: function (model, prevGroup) {
        // 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;