{"id":4723,"url":"https://github.com/peter4k/react-native-backbone","last_synced_at":"2025-08-04T02:31:25.850Z","repository":{"id":55880117,"uuid":"44204536","full_name":"peter4k/react-native-backbone","owner":"peter4k","description":"A react native version of backbone model","archived":false,"fork":false,"pushed_at":"2020-12-09T21:35:31.000Z","size":135,"stargazers_count":66,"open_issues_count":1,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-22T01:55:32.177Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peter4k.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-13T20:59:48.000Z","updated_at":"2022-04-15T12:09:23.000Z","dependencies_parsed_at":"2022-08-15T08:30:54.581Z","dependency_job_id":null,"html_url":"https://github.com/peter4k/react-native-backbone","commit_stats":null,"previous_names":["peter4k/react-native-rest-kit"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter4k%2Freact-native-backbone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter4k%2Freact-native-backbone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter4k%2Freact-native-backbone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter4k%2Freact-native-backbone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peter4k","download_url":"https://codeload.github.com/peter4k/react-native-backbone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228587347,"owners_count":17941442,"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-01-05T20:17:21.365Z","updated_at":"2024-12-07T09:30:53.274Z","avatar_url":"https://github.com/peter4k.png","language":"JavaScript","readme":"# react-native-backbone\n\nAs react native does not support Node.js HTTP module, react-native-backbone helps you to connect to your REST api or localStorage much easier using the same concept of Backbone models and collections.\n* You can simply call \"save\", \"fetch\", \"destroy\" method on each model to sycn them to your REST api.\n* \"fetch\" collections from REST api.\n* Using model.get() to retrieve data from model\n* Add an extra layer of the fetch method to check if the status API returns is not 200. Returns an json file instead of response object.\n\nTo do:\n* syncronize with localStorage\n\n### Table of content\n* [Setup](#install)\n* [RNBackbone.Model](#rnbackbonemodel)\n* [RNBackbone.Collection](#rnbackbonecollection)\n* [RNBackbone.Storage](#storage)\n\t* [fetchStorage](#fetchstorage)\n\t* [realmStorage](#realm)\n\n## Install\n\nThe easiest way to install: `npm install react-native-backbone`\n\nAnd require it in your React Native app: `var RNBackbone = require('react-native-backbone');` or ES6: `import RNBackbone from 'react-native-backbone'`;\n\n## RNBackbone.Model\nRNBackbone.Model is extended from backbone. The usages is almost the same as Backbone.Model, but some methods might be differnt. \n\n#### Create a model class\n```\nvar Car = RNBackbone.Model.extend({\n\trootUrl: \"http://www.your-domain.com/car\"\n\t//More options to be added\n});\n```\nrootUrl: the root url where this model connects to.\n* value: `String` or `function`. If its a function it should return a string.\n\n#### Create an instance\n```\nvar bmw = new Car({\n\t\"make\": \"BMW\",\n\t\"model\": \"428i\",\n\t\"year\": 2014\n})\n```\nYou can create a model using the `new` keyword. You can pass an object as the initial value of the model, you can also create an empty model.\n\n#### Model methods:\n##### set():\n```\nbmw.set('mpg', '23')\n```\nthis will set the atrribute mpg to 23.\n* If the attribute does not exist, this attribute will be added to the model.\n* If the attribute does exist, the value will be replaced.\n\nYou can also pass a json object as the argument:\n```\nbmw.set({\n\t\"mpg\": 23,\n\t\"color\": \"white\"\n})\n```\n\n##### unset():\n```\nbmw.unset('mpg', '23')\n```\nThe attribute \"mpg\" will be deleted\n* Unset does not take json object or array as argument.\n\n##### isNew():\n```\nbmw.isNew();\n```\nThis will return ture if \"id\" attribute does not exist\n\n##### save():\n```\nvar option = {\n\theaders:{\n\t\t\"Authentication\":\"Bearer SOME_TOKEN\"\n\t}\n}\n\nbmw.save(option, function(error){\n    if(error) console.log(error);\n    console.log(people);\n});\n```\nSave this model to the server, this is POST for new model and PUT for existing model\n* option: (optional)\n** option.headers: the headers to be added to the HTTP request\n\n##### fetch():\n```\nbmw = new Car({\n\tid: 1\n});\n\nbmw.fetch(function(error){\n    if(error) console.log(error);\n    console.log(people);\n});\n```\nFetch this model from the server, this is GET request\n* To fetch an model, ID has to be set.\n* option: (optional)\n** option.headers: the headers to be added to the HTTP request\n\n##### delete():\n```\nbmw.delete(option, function(error){\n    if(error) console.log(error);\n});\n```\nDelete this model to the server, this is DELETE method\n* To delete an model, ID has to be set.\n* option: (optional)\n** option.headers: the headers to be added to the HTTP request\n\n## RNBackbone.Collection\nThere is only one sync method supported for collection: fetch\n```\nvar Cars = RNBackbone.Colletion.extend({\n\tmodel: Car,\n\turl: 'https://YOUR_URL/cars\n});\nvar cars = new Cars();\ncars.fetch({\n\tsuccess: ()=\u003e{\n\t\tconsole.log(cars);\n\t}\n})\n```\n\n## Storage\nAs of react-native-backbone 0.1.0, we provides two different storage connectors.\n\n### fetchStorage\nfetchStorage is the default storage connectors used by RNBackbone. It uses the built-in \"fetch\" method of React-Native\n\n#### fetchStorage.globalOption.headers\nIf you want to send some headers in every request, you can set it up here.\n```\nimport fetchStorage from 'react-native-backbone/src/storages/fetch'\nfetchStorage.globalOption.headers:{\n\t\"Authentiacation\":\"Bearer SOME_TOKEN\"\n}\n```\n\n#### fetchStorage.send()\nSend simple HTTP request\nThis is based on the React Native fetch method. It has a simple error checking to check if the response status is not between 200-208 or 226.\nThe returned object is a json instead of a response object\n\n```\n//Set up request object\nvar request = {\n    method: 'post',\n    headers: {\n        'Accept': 'application/json',\n        'Content-Type': 'application/json'\n    },\n    body: JSON.stringify({\n        \"app\":\"FM Business\",\n        \"platform\":\"iOS\"\n    })\n}\n\nvar url = 'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA';\n\nfetchStorage.send(url, request, function(error, json){\n                if(error)\n                    console.log(\"encountered error: \", error);\n                console.log(json);\n            });\n```\nrequest object: the same object used for fetch()\n\n### Realm\nReact Native's \"asycnStorage\" is a key-value pair storage, which is not ideal for the backbone concept.\nreact native backbone uses a JavaScript library [Realm](https://realm.io/products/react-native/) for local storage\n\n#### Setting up Realm\n* RNBackbone has declared Realm as its dependency. But if you plan to use Realm in your project, you have to set it up using [rnpm](https://github.com/rnpm/rnpm):\n`rpm link realm`\n* Then you have to config RNBackbone to use Realm:\n```\nimport RNBackbone from 'react-native-backbone';\nimport realmStorage from 'react-native-backbone/src/storages/realm';\nRNBackbone.storage = realmStroage;\n```\n* Realm requires you to declare the schema of each Models before using them:\n```\n\tconst CarSchema = {\n\t  name: 'Car',\n\t  properties: {\n\t\t make:  'string',\n\t\t model: 'string',\n\t\t miles: {type: 'int', default: 0},\n\t  }\n   }; \n```\n_Realm doc about models: https://realm.io/docs/react-native/latest/#models_\n\n* Initialize realmStorage:\n\t* Realm requires to provide **ALL** schemas before using it.\n\t* realmStorage connector's `init()` methods allows RNBackbone to create a Realm instance using your schemas.\n```\nrealmStorage.init({\n  models: [Car, People]\n});\n```\n_Realm doc about models: https://realm.io/docs/react-native/latest/#models_\n\nNow you can start using RNBackbone as normal\n\n#### Realm Filter\nIf you are fetching a collection and you want to filter the objects, you can pass the filter option to the fetch method:\n```\nvar Cars = RNBackbone.Colletion.extend({\n\tmodel: Car,\n\turl: 'https://YOUR_URL/cars\n});\nvar cars = new Cars();\ncars.fetch({\n\tfilters: {\n\t    make: 'bmw'\n\t},\n\tsuccess: ()=\u003e{\n\t\tconsole.log(cars);\n\t}\n})\n","funding_links":[],"categories":["Components"],"sub_categories":["Backend"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeter4k%2Freact-native-backbone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeter4k%2Freact-native-backbone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeter4k%2Freact-native-backbone/lists"}