{"id":13778299,"url":"https://github.com/googlearchive/backbonefire","last_synced_at":"2025-12-12T04:41:16.579Z","repository":{"id":6331646,"uuid":"7567133","full_name":"googlearchive/backbonefire","owner":"googlearchive","description":"Backbone bindings for Firebase","archived":true,"fork":false,"pushed_at":"2018-08-24T22:16:55.000Z","size":313,"stargazers_count":291,"open_issues_count":15,"forks_count":89,"subscribers_count":60,"default_branch":"master","last_synced_at":"2024-04-14T06:51:43.930Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://backbonefire.firebaseapp.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/googlearchive.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.txt","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-01-11T21:14:09.000Z","updated_at":"2023-01-28T20:09:08.000Z","dependencies_parsed_at":"2022-08-31T01:00:14.618Z","dependency_job_id":null,"html_url":"https://github.com/googlearchive/backbonefire","commit_stats":null,"previous_names":["firebase/backfire","firebase/backbonefire"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlearchive%2Fbackbonefire","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlearchive%2Fbackbonefire/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlearchive%2Fbackbonefire/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlearchive%2Fbackbonefire/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/googlearchive","download_url":"https://codeload.github.com/googlearchive/backbonefire/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235599949,"owners_count":19016191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T18:00:52.829Z","updated_at":"2025-10-07T06:31:17.873Z","avatar_url":"https://github.com/googlearchive.png","language":"JavaScript","funding_links":[],"categories":["Adapters"],"sub_categories":[],"readme":"# Status: Archived\nThis repository has been archived and is no longer maintained.\n\n![status: inactive](https://img.shields.io/badge/status-inactive-red.svg)\n\n# BackboneFire\n\n[![Build Status](https://travis-ci.org/firebase/backbonefire.svg?branch=master)](https://travis-ci.org/firebase/backbonefire)\n[![Coverage Status](https://img.shields.io/coveralls/firebase/backbonefire.svg?branch=master\u0026style=flat)](https://coveralls.io/r/firebase/backbonefire?branch=master)\n[![Version](https://badge.fury.io/gh/firebase%2Fbackbonefire.svg?branch=master)](http://badge.fury.io/gh/firebase%2Fbackbonefire)\n\nBackboneFire is the officially supported [Backbone](http://backbonejs.org) binding for Firebase data. The bindings let you use special model and collection types that allow for synchronizing data with [Firebase](http://www.firebase.com/?utm_medium=web\u0026utm_source=backbonefire).\n\n## Live Demo\n\nPlay around with our [realtime Todo App demo](https://backbonefire.firebaseapp.com/). This Todo App is a simple port of the TodoMVC app using BackboneFire.\n\n## Basic Usage\nUsing BackboneFire collections and models is very similar to the regular ones in Backbone. To setup with BackboneFire use `Backbone.Firebase` rather than just `Backbone`.\n\n**Note: A `Backbone.Firebase.Model` should not be used with a `Backbone.Firebase.Collection`. Use a regular\n`Backbone.Model` with a `Backbone.Firebase.Collection`.**\n\n```javascript\n// This is a plain old Backbone Model\nvar Todo = Backbone.Model.extend({\n  defaults: {\n    completed: false,\n    title: 'New todo'\n  }\n});\n\n// This is a Firebase Collection that syncs data from this url\nvar Todos = Backbone.Firebase.Collection.extend({\n  url: 'https://\u003cyour-firebase\u003e.firebaseio.com/todos',\n  model: Todo\n});\n```\n\n## Downloading BackboneFire\n\nTo get started include Firebase and BackboneFire after the usual Backbone dependencies (jQuery, Underscore, and Backbone).\n\n```html\n\u003c!-- jQuery --\u003e\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Underscore --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Backbone --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Firebase --\u003e\n\u003cscript src=\"https://cdn.firebase.com/js/client/2.0.3/firebase.js\"\u003e\u003c/script\u003e\n\n\u003c!-- BackboneFire --\u003e\n\u003cscript src=\"https://cdn.firebase.com/libs/backbonefire/0.5.1/backbonefire.js\"\u003e\u003c/script\u003e\n```\n\nUse the URL above to download both the minified and non-minified versions of BackboneFire from the\nFirebase CDN. You can also download them from the\n[releases page of this GitHub repository](https://github.com/firebase/backbonefire/releases).\n[Firebase](https://www.firebase.com/docs/web/quickstart.html?utm_medium=web\u0026utm_source=backbonefire) and\n[Backbone](http://backbonejs.org/) can be downloaded directly from their respective websites.\n\nYou can also install BackboneFire via Bower and its dependencies will be downloaded automatically:\n\n```bash\n$ bower install backbonefire --save\n```\n\nOnce you've included BackboneFire and its dependencies into your project, you will have access to the `Backbone.Firebase.Collection`, and `Backbone.Firebase.Model` objects.\n\n\n## Getting Started with Firebase\n\nBackboneFire requires the Firebase database in order to sync data. You can\n[sign up here](https://www.firebase.com/signup/?utm_medium=web\u0026utm_source=backbonefire) for a free\naccount.\n\n## autoSync\n\nAs of the 0.5 release there are two ways to sync `Models` and `Collections`. By specifying the property `autoSync` to either true of false, you can control whether the component is synced in realtime. The `autoSync` property is true by default.\n\n#### autoSync: true\n\n```javascript\nvar RealtimeList = Backbone.Firebase.Collection.extend({\n  url: 'https://\u003cyour-firebase\u003e.firebaseio.com/todos',\n  autoSync: true // this is true by default\n})\n// this collection will immediately begin syncing data\n// no call to fetch is required, and any calls to fetch will be ignored\nvar realtimeList = new RealtimeList();\n\nrealtimeList.on('sync', function(collection) {\n  console.log('collection is loaded', collection);\n});\n```\n\n#### autoSync: false\n\n```javascript\n// This collection will remain empty until fetch is called\nvar OnetimeList = Backbone.Firebase.Collection.extend({\n  url: 'https://\u003cyour-firebase\u003e.firebaseio.com/todos',\n  autoSync: false\n})\nvar onetimeList = new OnetimeList();\n\nonetimeList.on('sync', function(collection) {\n  console.log('collection is loaded', collection);\n});\n\nonetimeList.fetch();\n```\n\n## Backbone.Firebase.Collection\n\nThis is a special collection object that will automatically synchronize its contents with your Firebase database.\nYou may extend this object, and must provide a Firebase database URL or a Firebase database reference as the\n`url` property.\n\nEach model in the collection will have its own `firebase` property that is its reference in Firebase.\n\nFor a simple example of using `Backbone.Firebase.Collection` see [todos.js]().\n\n```javascript\nvar TodoList = Backbone.Firebase.Collection.extend({\n  model: Todo,\n  url: 'https://\u003cyour-firebase\u003e.firebaseio.com/todos'\n});\n```\n\nYou may also apply an `orderByChild` or some other\n[query](https://www.firebase.com/docs/web/guide/retrieving-data.html#section-queries) on a\nreference and pass it in:\n\n### Queries\n\n```javascript\nvar TodoList = Backbone.Firebase.Collection.extend({\n  url: new Firebase('https://\u003cyour-firebase\u003e.firebaseio.com/todos').orderByChild('importance')\n});\n```\n\n### url as a function\n\nThe `url` property can be set with a function. This function must return a Firebase database ref or a url.\n\n```javascript\nvar TodoList = Backbone.Firebase.Collection.extend({\n  url: function() {\n    return new Firebase(...);\n  }\n});\n```\n\n\n### initialize function\n\nAny models added to the collection will be synchronized to the provided Firebase database. Any other clients\nusing the Backbone binding will also receive `add`, `remove` and `changed` events on the collection\nas appropriate.\n\nYou should add and remove your models to the collection as you normally would, (via `add()` and\n`remove()`) and _remote_ data will be instantly updated. Subsequently, the same events will fire on\nall your other clients immediately.\n\n### add(model)\n\nAdds a new model to the collection. If autoSync set to true, the newly added model will be synchronized to your Firebase database, triggering an\n`add` and `sync` event both locally and on all other clients. If autoSync is set to false, the `add` event will only be raised locally.\n\n```javascript\ntodoList.add({\n  subject: 'Make more coffee',\n  importance: 1\n});\n\ntodoList.on('all', function(event) {\n  // if autoSync is true this will log add and sync\n  // if autoSync is false this will only log add\n  console.log(event);\n});\n```\n\n### remove(model)\n\nRemoves a model from the collection. If autoSync is set to true this model will also be removed from your Firebase database, triggering a `remove` event both locally and on all other clients. If autoSync is set to false, this model will only trigger a local `remove` event.\n\n```javascript\ntodoList.remove(someModel);\n\ntodoList.on('all', function(event) {\n  // if autoSync is true this will log remove and sync\n  // if autoSync is false this will only log remove\n  console.log(event);\n});\n```\n\n### create(value)\n\nCreates and adds a new model to the collection. The newly created model is returned, along with an\n`id` property (uniquely generated by the Firebase client library).\n\n```javascript\nvar model = todoList.create({bar: \"foo\"});\ntodoList.get(model.id);\n\ntodoList.on('all', function(event) {\n  // will log add and sync\n  console.log(event);\n});\n```\n\n## Backbone.Firebase.Model\n\nThis is a special model object that will automatically synchronize its contents with your Firebase database. You\nmay extend this object, and must provide a Firebase database URL or reference as the `url`\nproperty.\n\n```javascript\nvar Todo = Backbone.Firebase.Model.extend({\n  url: \"https://\u003cyour-firebase\u003e.firebaseio.com/mytodo\"\n});\n```\nYou may apply query methods as with `Backbone.Firebase.Collection`.\n\n### urlRoot\nThe `urlRoot` property can be used to dynamically set the Firebase database reference from the model's id.\n\n```javascript\nvar Todo = Backbone.Firebase.Model.extend({\n  urlRoot: 'https://\u003cyour-firebase\u003e.firebaseio.com/todos'\n});\n\n// The url for this todo will be https://\u003cyour-firebase\u003e.firebaseio.com/todos/1\nvar todo = new Todo({\n  id: 1\n});\n```\n\nYou do not need to call any functions that will affect _remote_ data when `autoSync` is enabled. Calling `fetch()` will simply fire the `sync` event.\n\nIf `autoSync` is enabled, you should modify your model as you normally would, (via `set()` and `destroy()`) and _remote_ data\nwill be instantly updated.\n\n#### autoSync: true\n\n```javascript\nvar RealtimeModel = Backbone.Firebase.Model.extend({\n  url: 'https://\u003cyour-firebase\u003e.firebaseio.com/mytodo',\n  autoSync: true // true by default\n});\n\nvar realtimeModel = new RealtimeModel();\n\nrealtimeModel.on('sync', function(model) {\n  console.log('model loaded', model);\n});\n\n// calling .set() will sync the changes to your database\n// this will fire the sync, change, and change:name events\nrealtimeModel.set('name', 'Bob');\n```\n\n#### autoSync: false\n\n```javascript\nvar RealtimeModel = Backbone.Firebase.Model.extend({\n  url: 'https://\u003cyour-firebase\u003e.firebaseio.com/mytodo',\n  autoSync: false\n});\n\nvar realtimeModel = new RealtimeModel();\n\nrealtimeModel.on('sync', function(model) {\n  console.log('model loaded', model);\n});\n\n// this will fire off the sync event\nrealtimeModel.fetch();\n\n// calling .save() will sync the changes to your database\n// this will fire the sync, change, and change:name events\nrealtimeModel.save('name', 'Bob');\n\n```\n\n### set(value)\n\nSets the contents of the model and updates it in your database.\n\n```javascript\nMyTodo.set({foo: \"bar\"}); // Model is instantly updated in your database (and other clients)\n```\n\n### destroy()\n\nRemoves the model locally, and from Firebase.\n\n```javascript\nMyTodo.destroy(); // Model is instantly removed from your database (and other clients)\n```\n\n## Contributing\n\nIf you'd like to contribute to BackboneFire, you'll need to run the following commands to get your\nenvironment set up:\n\n```bash\n$ git clone https://github.com/firebase/backbonefire.git\n$ cd backbonefire           # go to the backbonefire directory\n$ npm install -g grunt-cli  # globally install grunt task runner\n$ npm install -g bower      # globally install Bower package manager\n$ npm install               # install local npm build / test dependencies\n$ bower install             # install local JavaScript dependencies\n$ grunt watch               # watch for source file changes\n```\n\n`grunt watch` will watch for changes to `src/backbonefire.js` and lint and minify the source file when a\nchange occurs. The output files - `backbonefire.js` and `backbonefire.min.js` - are written to the `/dist/`\ndirectory.\n\nYou can run the test suite via the command line using `grunt test`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglearchive%2Fbackbonefire","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglearchive%2Fbackbonefire","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglearchive%2Fbackbonefire/lists"}