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