Coder Social home page Coder Social logo

backbone-nesty's Introduction

Backbone Nesty

Travis CI Build Status NPM version NPM downloads Dependency Status Dev Dependency Status
Patreon donate button Open Collective donate button Gratipay donate button Flattr donate button PayPal donate button Bitcoin donate button Wishlist browse button
Slack community badge

Support nested data types like collections and models within your Backbone.js models

Install

NPM

  • Install: npm install --save backbone-nesty
  • Module: require('backbone-nesty')

Browserify

  • Install: npm install --save backbone-nesty
  • Module: require('backbone-nesty')
  • CDN URL: //wzrd.in/bundle/[email protected]

Ender

  • Install: ender add backbone-nesty
  • Module: require('backbone-nesty')

This package is published with the following editions:

  • backbone-nesty aliases backbone-nesty/index.js which uses Editions to automatically select the correct edition for the consumers environment
  • backbone-nesty/source/index.coffee is Source + CoffeeScript + Require
  • backbone-nesty/esnext/index.js is CoffeeScript Compiled + ESNext + Require
  • backbone-nesty/es2015/index.js is CoffeeScript Compiled + ES2015 + Require

Older environments may need Babel's Polyfill or something similar.

Usage

Example

// Import
var Backbone = require('backbone');
var BackboneNestyModel = require('backbone-nesty').BackboneNestyModel;

// Eye Model
var EyeModel = Backbone.Model.extend({
	attributes: {
		color: null,
		open: false
	}
});

// Eye Collection
var EyeCollection = Backbone.Collection.extend({
	model: EyeModel
});

// Mouth Model
var MouthModel = Backbone.Model.extend({
	attributes: {
		open: false
	}
});

// Head Model
var HeadModel = BackboneNestyModel.extend({
	// Define our nested collections
	collections: {
		eyes: EyeCollection
	},

	// Define our nested models
	models: {
		mouth: MouthModel
	}
});

// Instantiate our head with our nested data
var myHead = new HeadModel({
	// will create a mouth model with this data
	mouth: {
		open: true
	},
	// will create an eyes collection with this data
	eyes: [
		// will create an eye model with this data
		{
			id: 'left',
			color: 'green',
			open: true
		},
		// will create an eye model with this data
		{
			id: 'right',
			color: 'green',
			open: true
		}
	]
});

// Check
console.log(myHead.toJSON());
console.log(myHead.get('eyes.left.open')); // true
// ^ equiv to myHeader.get('eyes').get('left').get('open')

// Nested Setter
myHead.set('eyes.left.open', false);
// ^ equiv to myHeader.get('eyes').get('right').set('open', false)

// Check
console.log(myHead.toJSON());
console.log(myHead.get('eyes.left.open')); // false

BackboneNestyModel API

require('backbone-nesty').BackboneNestyModel is an extended Backbone.js Model that adds the following functionality:

  • properties
    • collections defaults to {}, an object which keys are the attributes and values are the collection data type for the attribute
    • models defaults to {}, an object which keys are the attributes and values are the model data type for the attribute
    • embed defaults to {}, an object which keys are the attributes and values are boolean on whether or not we should embed the full data of this attribute when calling toJSON on the model or just an id listing
    • strict defaults to true, a boolean for whether or not we should allow unknown attributes to be set on our model
  • methods
    • toJSON() will serialize the model and all nested data types as well, if the embed property for an nested data type is false, that value will be replaced with an id listing instead
    • get(key) adds support for nested gets
    • set(attrs,opts) adds support for nested sets and will instantiate the value according to the nested data type if applicable

History

Discover the release history by heading on over to the HISTORY.md file.

Contribute

Discover how you can contribute by heading on over to the CONTRIBUTING.md file.

Backers

Maintainers

These amazing people are maintaining this project:

Sponsors

These amazing people have contributed finances to this project:

Become a sponsor!

Patreon donate button Open Collective donate button Gratipay donate button Flattr donate button PayPal donate button Bitcoin donate button Wishlist browse button

Contributors

These amazing people have contributed code to this project:

Discover how you can contribute by heading on over to the CONTRIBUTING.md file.

License

Unless stated otherwise all works are:

and licensed under:

backbone-nesty's People

Contributors

balupton avatar dodo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

dodo

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.