Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including backbone-presenter with all npm packages installed. Try it out:

var backbonePresenter = require("backbone-presenter")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

backbone-presenter v0.1.0

Make your model data presentable.

Backbone Presenter

A model-presenter adapter for Backbone models.

For more information on how to customize your presenter, see the model-presenter README.


var Backbone = require('backbone');

var PersonPresenter = Backbone.Presenter.extend({

  customAttributes: {
    fullName: function() {
      return this.attributes.firstName + ' ' + this.attributes.lastName;
    fullNameAllCaps: function() {
      return this.customAttribute('fullName').toUpperCase();

  strategies: {
    avatar: {
      whitelist: ['image', 'username'],
      customAttributes: ['fullNameAllCaps']
    profile: {
      blacklist: ['ssn'],
      customAttributes: ['fullName']
    chat: {
      whitelist: ['image', 'username', 'memberSince']


var Person = Backbone.Model.extend({

  presenter: PersonPresenter

, initialize: function() {
    this.presenter.bind( this );


var person = new Person({
    image: 'image.jpeg',
    username: 'createbang',
    firstName: 'Michael',
    lastName: 'Phillips',
    ssn: '111-11-1111',
    memberSince: '2013-01-01'

person.present() // returns full representation of object including custom attributes
person.present('avatar') // returns {image: 'image.jpeg', username: 'createbang', fullNameAllCaps: 'MICHAEL PHILLIPS'}
person.present('profile') // returns all model data except ssn and adds fullName custom attribute
person.present('chat') // returns just the whitelisted keys


Extends the Backbone global with the constructor Presenter.

via npm

$ npm install backbone-presenter


Backbone Presenters are defined as an attribute on the applicable model and are bound to the model in the initialize method:

var Person = Backbone.Model.extend({

  presenter: PersonPresenter,

  initialize: function() {
    this.presenter.bind( this );



Presenters call a method on the presenter class to convert the model into a raw JavaScript object, if one is defined. Backbone.Presenter defines the serialize method as the result of model.toJSON().


  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Added some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Running tests

npm install
npm test
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free