{"_id":"react.backbone","_rev":"28-f709c3a8713b0ebf132996c1751935cf","name":"react.backbone","time":{"modified":"2022-06-26T09:00:30.346Z","created":"2014-07-02T20:36:12.275Z","0.4.0":"2014-07-02T20:36:12.849Z","0.4.1":"2014-07-02T20:39:07.075Z","0.5.0":"2014-07-30T20:59:41.952Z","0.6.0":"2015-01-06T02:32:10.766Z","0.8.0":"2016-03-11T16:08:13.498Z","0.9.0":"2016-04-13T04:53:02.017Z","0.9.2":"2017-11-30T15:45:38.106Z"},"maintainers":[{"email":"markijbema@gmail.com","name":"markijbema"},{"email":"clay.allsopp@gmail.com","name":"clayallsopp"}],"description":"Plugin for React to make Backbone migration easier","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
\n

{this.getModel().get(\"name\")}

\n
\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
\n \n
\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
  • { this.getModel().get('name') }
    • ;\n }\n});\n\nvar UsersListViewComponent = React.createBackboneClass({\n render: function() {\n var usersList = this.getCollection().map(function(user) {\n return ;\n });\n\n return (\n
    \n \n
    \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
    \n

    {this.props.comment.get(\"text\")}

    \n

    {'posted by' + this.props.user.get(\"name\")}\n

    \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 `