{"id":13418989,"url":"https://github.com/magalhas/backbone-react-component","last_synced_at":"2025-05-15T15:05:41.010Z","repository":{"id":13554541,"uuid":"16246661","full_name":"magalhas/backbone-react-component","owner":"magalhas","description":"A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server","archived":false,"fork":false,"pushed_at":"2024-09-02T15:43:42.000Z","size":1448,"stargazers_count":808,"open_issues_count":10,"forks_count":72,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-04-04T09:05:27.673Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://magalhas.github.io/backbone-react-component/","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/magalhas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-01-26T04:36:44.000Z","updated_at":"2025-03-04T10:54:42.000Z","dependencies_parsed_at":"2024-11-11T12:02:35.615Z","dependency_job_id":"8bb69f40-af99-49ea-be15-da86d68b8c28","html_url":"https://github.com/magalhas/backbone-react-component","commit_stats":{"total_commits":258,"total_committers":29,"mean_commits":8.89655172413793,"dds":"0.18604651162790697","last_synced_commit":"653d9fae2f57cfdf39f0808cd0e7669273cfa6c0"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magalhas%2Fbackbone-react-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magalhas%2Fbackbone-react-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magalhas%2Fbackbone-react-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magalhas%2Fbackbone-react-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/magalhas","download_url":"https://codeload.github.com/magalhas/backbone-react-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322683,"owners_count":21084336,"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-07-30T22:01:09.806Z","updated_at":"2025-04-11T20:38:54.900Z","avatar_url":"https://github.com/magalhas.png","language":"JavaScript","readme":"# [Backbone.React.Component](http://magalhas.github.io/backbone-react-component/) [![Build Status](https://travis-ci.org/magalhas/backbone-react-component.png)](https://travis-ci.org/magalhas/backbone-react-component)\n\n`Backbone.React.Component` is a mixin and API that glues [Backbone](http://backbonejs.org/) models and collections into [React](http://facebook.github.io/react/) components.\n\nWhen used as a mixin the component is mounted, a wrapper starts listening to models and collections changes to automatically set your component state and achieve UI binding through reactive updates.\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n**Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*\n\n- [Dependencies](#dependencies)\n- [How To](#how-to)\n  - [API Usage](#api-usage)\n  - [Mixin Usage](#mixin-usage)\n    - [One model](#one-model)\n    - [One collection](#one-collection)\n    - [Multiple models and collections](#multiple-models-and-collections)\n  - [Usage on the server (Node.js)](#usage-on-the-server-nodejs)\n  - [API](#api)\n    - [on(component, modelsAndCollectionsObject)](#oncomponent-modelsandcollectionsobject)\n    - [onModel(component, modelsObject)](#onmodelcomponent-modelsobject)\n    - [onCollection(component, collectionsObject](#oncollectioncomponent-collectionsobject)\n    - [off(component)](#offcomponent)\n  - [Mixin API](#mixin-api)\n    - [$](#)\n    - [getCollection()](#getcollection)\n    - [getModel()](#getmodel)\n    - [overrideModel()](#overridemodel)\n    - [overrideCollection()](#overridecollection)\n- [Examples](#examples)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Dependencies\n* [Backbone](http://backbonejs.org/) ([Underscore](http://underscorejs.org/))\n* [React](http://facebook.github.io/react/)\n\n## How To\nUsing [Bower](http://bower.io/)\n```\nbower install backbone-react-component\n```\n\nUsing [Npm](https://npmjs.org/)\n```\nnpm install backbone-react-component\n```\nIf you're not using [Bower](http://bower.io/) nor [Npm](https://npmjs.org/) download the source from the dist folder or use [CDNJS](http://cdnjs.com/).\n\n### API Usage\n\n```js\nimport Backbone from 'backbone';\nimport backboneReact from 'backbone-react-component';\nimport React from 'react';\n\nvar collection1 = new Backbone.Collection([\n  {hello: 1},\n  {hello: 2}\n]);\n\nexport default class Component extends React.Component {\n  componentWillMount () {\n    backboneReact.on(this, {\n      collections: {\n        myCollection: collection1\n      }\n    });\n  }\n\n  componentWillUnmount () {\n    backboneReact.off(this);\n  }\n\n  render () {\n    return (\n      \u003cdiv\u003e\n        {this.state.myCollection.map((model) =\u003e model.hello)}\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Mixin Usage\n\n#### One model\n```js\nvar MyComponent = React.createClass({\n  mixins: [Backbone.React.Component.mixin],\n  render: function () {\n    return \u003cdiv\u003e{this.state.model.foo}\u003c/div\u003e;\n  }\n});\n\nvar model = new Backbone.Model({foo: 'bar'});\n\nReactDOM.render(\u003cMyComponent model={model} /\u003e, document.body);\n// Update the UI\nmodel.set('foo', 'Hello world!');\n```\n`MyComponent` will listen to any model changes, making the UI refresh.\n\n#### One collection\n```js\nvar MyComponent = React.createClass({\n  mixins: [Backbone.React.Component.mixin],\n  createEntry: function (entry) {\n    return \u003cdiv key={entry.id}\u003e{entry.helloWorld}\u003c/div\u003e;\n  },\n  render: function () {\n    return \u003cdiv\u003e{this.state.collection.map(this.createEntry)}\u003c/div\u003e;\n  }\n});\nvar collection = new Backbone.Collection([\n  {id: 0, helloWorld: 'Hello world!'},\n  {id: 1, helloWorld: 'Hello world!'}\n]);\n\nReactDOM.render(\u003cMyComponent collection={collection} /\u003e, document.body);\n```\n\n#### Multiple models and collections\n```js\nvar MyComponent = React.createClass({\n  mixins: [Backbone.React.Component.mixin],\n  createEntry: function (entry) {\n    return \u003cdiv\u003e{entry.helloWorld}\u003c/div\u003e;\n  },\n  render: function () {\n    return (\n      \u003cdiv\u003e\n        {this.state.firstModel.helloWorld}\n        {this.state.secondModel.helloWorld}\n        {this.state.firstCollection.map(this.createEntry)}\n        {this.state.secondCollection.map(this.createEntry)}\n      \u003c/div\u003e\n    );\n  }\n});\n\nvar MyFactory = React.createFactory(MyComponent);\n\nvar newComponent = MyFactory({\n  model: {\n    firstModel: new Backbone.Model({helloWorld: 'Hello world!'}),\n    secondModel: new Backbone.Model({helloWorld: 'Hello world!'})\n  },\n  collection: {\n    firstCollection: new Backbone.Collection([{helloWorld: 'Hello world!'}]),\n    secondCollection: new Backbone.Collection([{helloWorld: 'Hello world!'}])\n  }\n});\nReactDOM.render(newComponent, document.body);\n```\n\n### Usage on the server (Node.js)\n```js\nvar Backbone = require('backbone');\nvar backboneMixin = require('backbone-react-component');\nvar React = require('react');\n\nvar model = new Backbone.Model({\n  helloWorld: 'Hello world!'\n});\nvar HelloWorld = React.createClass({\n  mixins: [backboneMixin],\n  render: function () {\n    return React.DOM.div({}, this.state.model.helloWorld);\n  }\n});\nvar HelloWorldFactory = React.createFactory(HelloWorld);\n\n// Render to an HTML string\nReactDOM.renderToString(HelloWorldFactory({model: model}));\n// Updating the model\nmodel.set('helloWorld', 'Hi again!');\n// Rendering to an HTML string again\nReactDOM.renderToString(HelloWorldFactory({model: model}));\n```\n\n### API\n\n#### on(component, modelsAndCollectionsObject)\nBinds all models/collections found inside `modelsAndCollectionsObject` to\n`component`. `modelsAndCollectionsObject` takes the following form:\n\n```js\n{\n  models: {\n    a: new Backbone.Model() // binds to `@state.a`\n  },\n  collections: {\n    b: new Backbone.Collection() // binds to `@state.b`\n  }\n}\n```\n\n#### onModel(component, modelsObject)\nShortcut method to `#on`. `modelsObject` can either be an object of\n`Backbone.Model`s or a single instance of one.\n\n#### onCollection(component, collectionsObject\nShortcut method to `#on`. `collectionsObject` can either be an object of\n`Backbone.Collection`s or a single instance of one.\n\n#### off(component)\nTeardown method. Unbinds all models and collections from `component`.\n\n### Mixin API\nThe following API is under `Backbone.React.Component.mixin` (`require('backbone-react-component')`):\n\n#### $\nInspired by Backbone.View, it's a shortcut to this.$el.find method if `jQuery`\nis present, else it fallbacks to native DOM `querySelector`.\n\n#### getCollection()\nGrabs the component's collection(s) or from one of the parents.\n\n#### getModel()\nGrabs the component's model(s) or from one of the parents.\n\n#### overrideModel()\nHook that can be implemented to return a model or multiple models. This hook is\nexecuted when the component is initialized. It's useful on cases such as when\n`react-router` is being used.\n\n#### overrideCollection()\nHook that can be implemented to return a collection or multiple collections.\nThis hook is executed when the component is initialized. It's useful on cases\nsuch as when `react-router` is being used.\n\n\n## Examples\n* [Blog](https://github.com/magalhas/backbone-react-component/tree/master/examples/blog)\n* [Nested](https://github.com/magalhas/backbone-react-component/tree/master/examples/nested)\n* [Typewriter](https://rawgithub.com/magalhas/backbone-react-component/master/examples/typewriter/index.html)\n* [Screencast](https://www.youtube.com/watch?v=iul1fWHVU6A)\n","funding_links":[],"categories":["JavaScript","Utilities","Uncategorized","Awesome React"],"sub_categories":["Framework bindings / integrations","Uncategorized","Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagalhas%2Fbackbone-react-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagalhas%2Fbackbone-react-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagalhas%2Fbackbone-react-component/lists"}