React components for use with backbone and backbone paginator
Switch branches/tags
Clone or download
Sara Noonan Sara Noonan
Sara Noonan and Sara Noonan Remove the now ignored directory node_modules
Latest commit 4d2d162 Jan 18, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app package updates Jan 14, 2015
.bowerrc initial commit Aug 30, 2014
.gitignore fixes. Jan 13, 2015
.travis.yml build fix and travis in readme Sep 24, 2014
README.md fixes. Jan 13, 2015
app.js added comments Sep 25, 2014
bower.json first few jest tests and fix to search Sep 23, 2014
gulpfile.js fixes. Jan 13, 2015
index.js updated readme, components are now part of the build Sep 25, 2014
package.json Remove the now ignored directory node_modules Jan 18, 2015

README.md

#Backbone-React-ui

React components for use with Backbone, Bootstrap and Backbone.Paginator

This project is based lightly on React-bootstrap but is focused on incorporating backbone to create a viewmodel system

Build Status

##Usage:

npm install backbone-react-ui

var BackboneReactUI = require('backbone-react-ui');
React.renderComponent(BackboneReactUI.FilterablePageableTable({initialCollection:coll, maximumPages:5}), document.getElementById("container"));

##Dependencies:

  • React
  • jQuery
  • Backbone
  • Backbone.paginator -- optional
  • Lodash/underscore

##Components:

  • Paginator (Based on a Backbone Collection or a Backbone Paginator Collection)
  • Table (Based on a Backbone Collection or a Backbone Paginator Collection)
  • PageableTable (Based on a Backbone Collection or a Backbone Paginator Collection)
  • FilterablePageableTable - The whole sha-bang being able to filter results, sort and page through them. Also based on a Backbone Collection or a Backbone Paginator Collection

An demo of the FitlerablePageableTable can be found here http://securingsincity.github.io/backbone-react-ui/example.html

##Table

At its simplest this is a bootstrap table driven by a backbone collection.

###To use :

  • Create a new backbone pageable collection with a table factory object :
var testModel = Backbone.Model.extend();
var testCollection = Backbone.Collection.extend({
  model : testModel,
  tableFactory : {
    'ID': {
      field: 'id',
      display: 'string',
      sortable: true
    },
    'First Name' : {
      field:'first_name',
      display: 'string',
      sortable: true
    },
    'Last Name' : {
      field: 'last_name',
      display: 'string',
      sortable: true
    },
    'Edit' : {
      action: 'edit',
      display: 'button',
      classes: 'btn-success'
    },
    'Remove' : {
      action: 'delete',
      display: 'button',
      classes: 'btn-warning',
      icon: 'glyphicon-remove'
    },
  }
});
var coll = new testCollection([], {
   mode: "client",
   comparator: function (model) {
     return model.get("last_name");
   },

});

The table factory object is made up of a field, how it should be displayed (for now a string or a button), an action, additional classes and an icon

This builds out the columns of that table

####Notes :

  • The sortable functionality is only available to a backbone pageable collection for now
  • This is based on bootstrap's use of glyphicons and button functionality
  • Sorting should work with both server side and client side pageable collections

To instantiate the table

React.renderComponent(<Table striped hover condensed initialCollection={coll} />, document.getElementById("container"));

###PageableTable

This combines the paginator and the table functionality.

The only difference is that you would include a Backbone.PageableCollection this would allow the system to know the max number of pages and your current page.

The instantiation would be the same except with this time you could include the maximumPages if you have many pages of data

React.renderComponent(<PageableTable striped hover condensed initialCollection={coll} maximumPages={5} />, document.getElementById("container"));

###FilterablePageableTable

This combines the paginator, the table functionality as well as filter/search.

The search can be driven by an API or just done on the client side

React.renderComponent(<FilterablePageableTable striped hover condensed initialCollection={coll} maximumPages={5} />, document.getElementById("container"));