{"id":13400912,"url":"https://github.com/clayallsopp/react.backbone","last_synced_at":"2025-12-12T03:04:59.149Z","repository":{"id":57347980,"uuid":"10875626","full_name":"clayallsopp/react.backbone","owner":"clayallsopp","description":"Plugin for React to make Backbone migration easier","archived":false,"fork":false,"pushed_at":"2017-11-30T14:13:44.000Z","size":51,"stargazers_count":840,"open_issues_count":8,"forks_count":65,"subscribers_count":27,"default_branch":"master","last_synced_at":"2024-04-10T00:56:09.503Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clayallsopp.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":"2013-06-23T01:10:09.000Z","updated_at":"2024-03-02T13:42:57.000Z","dependencies_parsed_at":"2022-08-28T01:40:40.592Z","dependency_job_id":null,"html_url":"https://github.com/clayallsopp/react.backbone","commit_stats":null,"previous_names":["usepropeller/react.backbone"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayallsopp%2Freact.backbone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayallsopp%2Freact.backbone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayallsopp%2Freact.backbone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayallsopp%2Freact.backbone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clayallsopp","download_url":"https://codeload.github.com/clayallsopp/react.backbone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276164,"owners_count":20912288,"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.852Z","updated_at":"2025-12-12T03:04:58.655Z","avatar_url":"https://github.com/clayallsopp.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"react.backbone\n==============\n\n[![Build Status](https://travis-ci.org/clayallsopp/react.backbone.svg)](https://travis-ci.org/clayallsopp/react.backbone)\n\nPlugin for React to make Backbone integration easier. Initialize your component\nwith a Backbone.Model or Backbone.Collection; when the model or collection\nchanges, `#render` will be called.\n\n```javascript\nvar UserViewComponent = React.createBackboneClass({\n    changeOptions: \"change:name\", // DEFAULT is \"change\",\n    render: function() {\n        return (\n          \u003cdiv\u003e\n              \u003ch1\u003e{this.getModel().get(\"name\")}\u003c/h1\u003e\n          \u003c/div\u003e\n        );\n    }\n});\n\nvar user = new Backbone.Model();\nvar UserView = React.createFactory(UserViewComponent);\nvar userView = UserView({model: user});\n\n// Mount your component directly\nReact.render(userView, document.getElementById('element'));\n\n// Render as a subview\nvar ProfileViewComponent = React.createClass({\n  render: function() {\n      return (\n        \u003cdiv\u003e\n          \u003cUserViewComponent model={this.props.user} /\u003e\n        \u003c/div\u003e\n      );\n  }\n});\n\nvar ProfileView = React.createFactory(ProfileViewComponent);\nvar profileView = ProfileView({user: user});\nReact.render(profileView, document.getElementById('element'));\n```\n\nReact.Backbone also plays nicely with `Backbone.Collection`. Anytime the `add`,\n`remove`, `reset` or `sort` events are triggered the component will re-render.\n\n```javascript\nvar UserViewComponent = React.createBackboneClass({\n  render: function() {\n    return \u003cli\u003e{ this.getModel().get('name') }\u003c/li\u003e;\n  }\n});\n\nvar UsersListViewComponent = React.createBackboneClass({\n    render: function() {\n        var usersList = this.getCollection().map(function(user) {\n            return \u003cUserViewComponent model={user} /\u003e;\n        });\n\n        return (\n          \u003cdiv\u003e\n            \u003cul\u003e\n              { usersList }\n            \u003c/ul\u003e\n          \u003c/div\u003e\n        );\n    }\n});\n\nvar usersList = new Backbone.Collection();\nvar UsersListView = React.createFactory(UsersListViewComponent);\nvar usersListView = UsersListView({collection: usersList});\n\nReact.render(usersListView, document.getElementById('users'));\n```\n\nIf you need to use multiple models, you can do so by including the mixin\nmultiple times:\n\n```javascript\nvar CommentViewComponent = React.createBackboneClass({\n    mixins: [\n\n        // when the view is instantiated,\n        // 'user' and 'comment' can be passed as props\n        React.BackboneMixin(\"user\", \"change:name\"),\n        React.BackboneMixin(\"comment\")\n    ],\n    render: function() {\n        return (\n          \u003cdiv\u003e\n              \u003cp\u003e{this.props.comment.get(\"text\")}\u003c/p\u003e\n              \u003cp\u003e{'posted by' + this.props.user.get(\"name\")}\u003c/h1\u003e\n          \u003c/div\u003e\n        );\n    }\n});\n\nvar user = new Backbone.Model();\nvar comment = new Backbone.Model();\nvar CommentView = React.createFactory(CommentViewComponent);\nvar commentView = CommentView({user: user, comment: comment});\n\nReact.render(usersListView, document.getElementById('users'));\n```\n\nYou can also pass an object with options to the included mixin:\n\n```javascript\nReact.BackboneMixin({\n    propName: \"user\",\n    renderOn: \"change:name\"\n});\n```\n\nOr supply a custom callback to the option `modelOrCollection` to retrieve the\nproperty from the component's props:\n\n```javascript\nReact.BackboneMixin({\n    modelOrCollection: function(props) {\n        return props.comment.user;\n    },\n    renderOn: \"change:name\"\n});\n```\n\nIf your Collection or Model class does not inherit directly from Backbone.Model\nor Backbone.Collection, you may customize the behavior on a library level by\noverriding the React.BackboneMixin.ConsiderAsCollection function.\n\nReturn `true` if the object passed should behave as a collection.\n\n```javascript\nReact.BackboneMixin.ConsiderAsCollection = function (modelOrCollection) {\n  return modelOrCollection instanceof Backbone.Collection || modelOrCollection instanceof MyCustomCollection;\n}\n```\n\n### Installation\n\nEither download `react.backbone.js` or install the `react.backbone` package on\nBower:\n\n```\nbower install --save react.backbone\n```\n\nYou can either include react.backbone in a `\u003cscript\u003e` tag (after you've\nincluded Backbone and React) or through RequireJS/AMD:\n\n```javascript\ndefine(['backbone', 'react', 'react.backbone'], function(Backbone, React) {\n    var UserViewComponent = React.createBackboneClass({\n        // ...\n    });\n});\n```\n\nVersion 0.7.0 supports React \u003e0.14 and Backbone \u003e1.0; for React \u003c0.14, check out versions 0.6.0 and prior.\nReact Native is also supported, but only works with npm v3 (otherwise it will use the wrong React dependency).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclayallsopp%2Freact.backbone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclayallsopp%2Freact.backbone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclayallsopp%2Freact.backbone/lists"}