Backbone.CollectionView

Easily render backbone.js collections. In addition managing model views, this class supports automatic selection of models in response to clicks, and rearranging models (and reordering the underlying collection) via drag and drop. Get and set selected models through a dead simple API.

Single Selection

Click an item in the list to select it.

JavaScript
CSS

var collectionView = new Backbone.CollectionView( {
  el : $( "ul#demoSingleSelectionList" ),
  selectable : true,
  collection : employeeCollection,
  modelView : EmployeeView
} );

ul.collection-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  outline: none;
  cursor: pointer;
}

ul.collection-list li {
  margin: 7px;
  padding: 10px;
  border: 1px solid #AAA;
  border-radius: 4px;   /* may need vendor varients */
  background: #FAFAFA;
}

ul.collection-list li.selected {
  background: #678be4;
  border: 1px solid #2659d9;
  color: white;
}

Multiple Selection

Click and hold Command, Control (Windows) or Shift.

JavaScript
CSS

var collectionView = new Backbone.CollectionView( {
  el : $( "ul#demoMultipleSelectionList" ),
  selectable : true,
  selectMultiple : true,
  collection : employeeCollection,
  modelView : EmployeeView
} );

ul.collection-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  outline: none;
  cursor: pointer;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);   /* may need vendor varients */
  font-family: "Helvetica Neue", Helvetica, arial;
}

ul.collection-list li {
  padding: 10px;
  border-bottom: 1px solid #E6E6E6;
  background: #F7F7F7;
}

ul.collection-list li.selected {
  color: white;
  background: #678BE4;
}

Tables

Collection views can also be rendered as tables.

First Name	Last Name

JavaScript
CSS

var collectionView = new Backbone.CollectionView( {
  el : $( "table#demoTables" ),
  selectable : true,
  collection : employeeCollection,
  modelView : EmployeeView
} );

table.collection-list {
  border-collapse: collapse;
  width: 350px;
  border: 1px solid #AAA;
  font-family: "Helvetica Neue", Helvetica, arial;
  cursor: pointer;
}

table.collection-list tr:nth-child(even) {
  background: #EBF0FF;
}

table.collection-list tr.selected {
  color: #FFF;
  background: #678BE4;
}

table.collection-list tr td {
  padding: 10px 20px;
  border-right: 1px solid #AAA;
}

Sorting

Click and drag.

JavaScript
CSS

var collectionView = new Backbone.CollectionView( {
  el : $( "ul#demoSortableList" ),
  selectable : true,
  sortable : true,
  collection : employeeCollection,
  modelView : EmployeeView
} );

ul.collection-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  outline: none;
  cursor: pointer;
}

ul.collection-list li {
  margin: 10px 0;
  padding: 10px;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #F7F7F7), color-stop(100%, #E8E8E8));
  background: -webkit-linear-gradient(#F7F7F7, #E8E8E8);
  background:    -moz-linear-gradient(#F7F7F7, #E8E8E8);
  background:      -o-linear-gradient(#F7F7F7, #E8E8E8);
  background:         linear-gradient(#F7F7F7, #E8E8E8);
  border: 1px solid #C9C9C9;
  background: #F0F0F0;
  border-radius: 4px;   /* may need vendor varients */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);   /* may need vendor varients */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

ul.collection-list li.selected {
  border: 1px solid #2659D9;
  color: #FFF;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
  background: #678BE4;
}

Empty list caption

Display customized text when the list is empty.

JavaScript
CSS

 var collectionView = new Backbone.CollectionView( {
  el : $( "ul#demoEmptyListCaption" ),
  selectable : true,
  selectableMultiple : true,
  sortable: true,
  emptyListCaption : "There are no items in this list.",
  collection : new Employees(),
  modelView : EmployeeView
} );

$( "#demoRemoveFromCollectionButton" ).click( function() {
  var selectedModels = collectionView.getSelectedModels();
  collectionView.collection.remove( selectedModels );
} );

$( "#demoAddToCollectionButton" ).click( function() {
  collectionView.collection.add( {
    firstName : "Super", lastName : "Sleuth"
  } );
} );

ul.collection-list {
  min-height: 150px;
  margin: 0;
  border: 1px solid #A0A0A0;
  padding: 0px 10px;
  background: #FAFAFA;
  list-style-type: none;
  outline: none;
  cursor: pointer;
}

ul.collection-list li {
  margin: 10px 0;
  padding: 10px;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #F7F7F7), color-stop(100%, #E8E8E8));
  background: -webkit-linear-gradient(#F7F7F7, #E8E8E8);
  background:    -moz-linear-gradient(#F7F7F7, #E8E8E8);
  background:      -o-linear-gradient(#F7F7F7, #E8E8E8);
  background:         linear-gradient(#F7F7F7, #E8E8E8);
  border: 1px solid #C9C9C9;
  background: #F0F0F0;
  border-radius: 4px;   /* may need vendor varients */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);   /* may need vendor varients */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

ul.collection-list li.selected {
  border: 1px solid #2659D9;
  color: #FFF;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
  background: #678BE4;
}

ul.collection-list var.empty-list-caption {
  color: #A0A0A0;
  padding: 30px;
  display: block;
  text-align: center;
  font-style: normal;
  line-height: 1.45;
}

Events

Easily hook into events.

JavaScript
CSS

var collectionView = new Backbone.CollectionView( {
  el : $( "ul#demoEvents" ),
  selectable : true,
  collection : employeeCollection,
  modelView : EmployeeView
} );

collectionView.on( "selectionChanged", function() {
  var selectedModel = collectionView.getSelectedModel();
  $( "#demoEventsCaption" ).text(
    "The newly selected model is: " +
    selectedModel.get( "firstName" ) + " " +
    selectedModel.get( "lastName" ) );
} );

ul.collection-list {
  background: #FDFDFD;
  font-family: "lucida grande",tahoma,sans-serif;
  border: 1px solid #78A9CE;
  margin: 2px 0px 2px 0px;
  border-radius: 4px;   /* may need vendor varients */
}

ul.collection-list li {
  padding: 6px;
}

ul.collection-list li.selected {
  background: #9EADD0;
  color: white;
}

Filters

Specify which items are selectable, sortable, or visible.

JavaScript
CSS

var collectionView = new Backbone.CollectionView( {
  el : $( "ul#demoFilters" ),
  selectable : true,
  collection : employeeCollection,
  modelView : EmployeeView,
  selectableModelsFilter : function( model ) {
    return model.get( "lastName" ) === "Holmes";
  }
} );

ul.collection-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  outline: none;
  cursor: pointer;
}

ul.collection-list li {
  margin: 7px;
  padding: 10px;
  border: 1px solid #AAA;
  border-radius: 4px;   /* may need vendor varients */
  background: #FAFAFA;
}

ul.collection-list li.selected {
  background: #678be4;
  border: 1px solid #2659d9;
  color: white;
}

ul.collection-list li.not-selectable {
  opacity: .5;
}