Git Product home page Git Product logo

backbone.crudder's Introduction

Backbone Crudder

This backbone plugin makes CRUD operations easier over large applications. You can set application wide fetch/save/delete callbacks that cut down boilerplate code.

Feel free to use and change this plugin as you wish as it has been developed to suit my own application, but maybe not yours. Fill your boots!

Current version: 1.0.0

Requirements

Getting up and running

Download the script

Reference the script

This script requires jQuery, Backbone and Underscore, so make sure you add it after those files.

<script src="path/to/file/backbone.crudder.js"></script>

Extend Crudder

You can extend Crudder and define what you want to happen when the provided callbacks are fired.

_.extend(Backbone.Crudder.prototype, {

  beforeSend: function() {

    // What you want to happen before send

  },

  onComplete: function() {

    // What you want to happen on complete

  },

  onSuccess: function(options) {

    // What you want to happen on success

  },

  onError: function(options) {

    // What you want to happen on error

  }

});

Make sure that you include the backbone.crudder.js file before you extend it.

Initialise Crudder

When you initialise crudder, you can state which of the functions you wish to be activated.

Backbone.Crudder.initialize({

  beforeSendActivated: true,
  onCompleteActivated: false,
  onSuccessActivated: true,
  onErrorActivated: true

});

Using Crudder

Options

Each type of Crudder request types share the following options:

{
  enitity: this.model // The model or collection you wish to perfom the operation on {model or collection}
  successMessage: 'User data has been fetched', // The message to display on a successful request {String}
  errorMessage: 'Error accessing user data', // The message to display on a request error {String}
}

The success and error messages are passed into the onSuccess and onError methods, for you to display them however your wish.

The creating/updating/deleting requests share the following options:

{
  wait: true, // Do we want to wait for a server response? (Boolean, Default: true)
  silent: true, // Do we want to prevent the built-in Backbone event from being triggered (Boolean, Default: false)
}

The creating/updating request has the following options:

{
  entityData: {} // The data to send to the server (Object)
}

Example Fetch

Options
Backbone.Crudder.reading({

  entity: this.collection,
  successMessage: 'User data has been fetched',
  errorMessage: 'Error accessing user data',

}, function(options) {

  // Callback function
  // Do whatever you require to do here

  // Has the request been successful?
  if (options.success) {

  }

});

Example Save

Backbone.Crudder.creatingUpdating({

  entity: this.model,
  entityData: {

    name: 'Gareth',
    email: '[email protected]'

  },
  wait: true,
  silent: true,
  successMessage: 'The user has been saved',
  errorMessage: 'Unable to save the user'

}, function(options) {

  // Callback function
  // Do whatever you require to do here

  // Has the request been successful?
  if (options.success) {

  }

});

You may want to look at Derick Bailey's Backbone.Syphon as an easy way to serialise the forms in your backbone application.

Example Delete

Backbone.Crudder.deleting({

  entity: this.model,
  wait: true,
  silent: true,
  successMessage: 'The user has been removed',
  errorMessage: 'Unable to remove the user'

}, function(options) {

  // Callback function
  // Do whatever you require to do here

  // Has the request beed successful?
  if (options.success) {

  }

});

backbone.crudder's People

Contributors

garethadavies avatar justchecking-gareth avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.