{"id":13400917,"url":"https://github.com/andrejewski/reactbone","last_synced_at":"2025-07-05T01:07:42.748Z","repository":{"id":14191907,"uuid":"16898374","full_name":"andrejewski/reactbone","owner":"andrejewski","description":"React extensions for Backbone","archived":false,"fork":false,"pushed_at":"2014-08-13T14:28:46.000Z","size":308,"stargazers_count":44,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-12T01:13:51.733Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrejewski.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2014-02-17T01:16:42.000Z","updated_at":"2023-03-08T03:17:14.000Z","dependencies_parsed_at":"2022-08-30T00:00:47.904Z","dependency_job_id":null,"html_url":"https://github.com/andrejewski/reactbone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/andrejewski/reactbone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejewski%2Freactbone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejewski%2Freactbone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejewski%2Freactbone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejewski%2Freactbone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrejewski","download_url":"https://codeload.github.com/andrejewski/reactbone/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejewski%2Freactbone/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261390954,"owners_count":23151660,"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-30T19:00:56.893Z","updated_at":"2025-07-05T01:07:42.727Z","avatar_url":"https://github.com/andrejewski.png","language":"JavaScript","readme":"Reactbone\n=========\n\nReactbone extends [Backbone](http://backbonejs.org/) models and collections to better work with an immutable dependent such as [React](http://facebook.github.io/react/) by exposing two subclasses `ReactModel` and `ReactCollection`. These classes expose methods to allow a data hierarchy to be easily built between models and collections and expose access to the entire state of an application designed in such a way.\n\n## Installation\n\n### NPM \n\n```bash\nnpm install reactbone\n```\n\n### Script\nFor the bundled version of Reactbone, use this repository's `reactbone.js`. It comes with its Backbone and Underscore dependencies.\n\n```html\n\u003cscript src=\"reactbone.js\"/\u003e\n```\n\nTo create the bundle, install via NPM and build it with the build command, which uses Browserify.\n\n```bash\nnpm run build\n```\n\n## Usage\n\nReactbone extends Backbone so it can be used anywhere Backbone would be used. The only difference is Reactbone adds its classes to Backbone.\n\n```javascript\nvar Reactbone = require('reactbone');\n\nReactbone.Model; // just Backbone.Model\nReactbone.ReactModel;\nReactbone.Collection; // just Backbone.Collection\nReactbone.ReactCollection; \n```\n\n### Integrating with React\n\nReactbone makes plugging into React.js as simple and expressive as possible.\n\n```javascript\nvar data = Application({name: 'color-me-shocked'}), // ReactModel\n\tview = React.createClass({...});\n\ndata.on('change', function(model) {\n\tvar state = model.toReact();\n\tReact.renderComponent(view(state), document.body);\n});\n```\n\n## Architecture\n\nReactbone is the middleground between Backbone and React. Any changes on the Backbone model hierarchy propogate up to Reactbone which then serializes the models into their JSON and helpers. That data can then be passed to React classes for rendering. Within React, helpers may be called (either manually or by user interaction) and may then change the underlying Backbone data, triggering the original data flow.\n\n![Dataflow](https://raw.githubusercontent.com/andrejewski/reactbone/master/dataflow.jpg)\n\nFrom the perspective of React, the data is immutable as an entirely new state is being passed to it on change from Backbone. The immutable data can also be used for snapshots, free undos and redos of application state, and all the other benefits of immutability. Yet, from the perspective of Backbone, the data is mutable and has the advantage of Underscore, Backbone, and plain JavaScript mutable functions. Reactbone harmonizes these two perspectives.\n\n## ReactModel\n\n### #property\n\n- `property(name String) (Backbone.Model||Backbone.Collection)`\n- `property(name String, component (Backbone.Model||Backbone.Collection)) this`\n- `property(Object[name String]component(Backbone.Model||Backbone.Collection)) this`\n\nReactModel needs to know which objects attached to the model should be included in the data hierarchy. The `property` method accepts a name String and a component which is either a Backbone Model or Collection (or a subclasss of them), or a map of them if you have multiple. If you only pass a name String, the component at `model.properties[name]` or undefined will be returned.\n\nThe component will be watched for changes and those changes will be reflected through the parent model in the `change` and `change:#{name}` events where `name` was the String provided to the method.\n\nThe component can then be accessed on the parent model via `model[name]` or `model.name` where `name` was the String provided to the method.\n\nThe component's properties can then be set directly via setting them on the parent model. For instance, calling `model.set(name, {poop: 'poop'});` would be equivalent to calling `model[name].set({poop: 'poop'});` Setting values on a component the former way will not trigger `change:#{name}` but instead `change:_#{name}` as to not double trigger on any model listening for `change:#{name}`.\n\n```javascript\nvar User = ReactModel.extend({\n    initialize: function() {\n        // setters\n        this.property('posts', new Posts({parent: this}));\n        this.property({\n            likes: new Likes({parent: this}),\n            comments: new Comments({parent: this})\n        });\n        // getter\n        var posts = this.property('posts');\n    }\n});\n```\n\n\n### #helper\n\n- `helper(name String) Function`\n- `helper(name String, func Function) this`\n- `helper(Object[name String]func Function) this`\n\nHelpers are functions that will be added to the data representation of the model in the data hierarchy. These methods will allow React to communicate UI interactions back to the model. The `helper` method accepts a name String and a helper function, or a map of them if you have multiple. If a string is passed as a function parameter, the function at `model[func]` will be used. All functions are bound to the model with Underscore's `bind` function. If you only pass a name String, the function at `model.helpers[name]` or undefined will be returned.\n\n```javascript\nvar User = ReactModel.extend({\n    initialize: function() {\n        // setters\n        this.helper('updateFirstName', this.updateFirstName);\n        this.helper('updateLastName', function(newLastName) {\n            this.set('lastName', lastName);\n        });\n        this.helper({\n            helperOne: function() {},\n            helperTwo: function() {}\n        });\n        // getter\n        var helper = this.helper('updateFirstName');\n    },\n    updateFirstName: function(newFirstName) {\n        this.set('firstName', newFirstName);\n    }\n});\n```\n\n### #toReact\n\n- `toReact() Object`\n\nThis is the only external function to be called in order to use Reactbone with React. This function returns the data hierarchy of the model along with all of its attached properties and associated helper functions. This function will recursively call `toReact` on all of its properties, defaulting to `toJSON` if not found. Example usage:\n\n```javascript\nvar model = new Application({poop: 'poop'});\n\nvar root = document.getElementById('application'),\n    view = React.renderComponent(ApplicationView({data: model.toReact()}), root);\n    \nmodel.on('change', function(model, options) {\n    view.setProps({data: model.toReact()});\n});\n```\n\n## ReactCollection\n\nReactCollection is not very extensive, it only exposes the `toReact` method, which is needed to match the ReactModel API. All it does is map over the collection, calling each model's own `toReact` (or `toJSON`) method.\n\n## Contributing\n\nContributions are incredibly welcome as long as they are standardly applicable and pass the tests (or break bad ones). Tests are written in Mocha and assertions are done with the Node.js core `assert` module.\n\n```bash\n# running tests\nnpm run test\nnpm run test-spec # spec reporter\n```\n\nFollow me on [Twitter](https://twitter.com/compooter) for updates or just for the lolz and please check out my other [repositories](https://github.com/andrejewski) if I have earned it. I thank you for reading.\n","funding_links":[],"categories":["Uncategorized","Awesome React","React [🔝](#readme)"],"sub_categories":["Uncategorized","Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrejewski%2Freactbone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrejewski%2Freactbone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrejewski%2Freactbone/lists"}