{"id":16095833,"url":"https://github.com/joakin/backbone-basics","last_synced_at":"2025-04-05T20:15:38.768Z","repository":{"id":8456208,"uuid":"10051796","full_name":"joakin/backbone-basics","owner":"joakin","description":"Basics library for developing backbone applications","archived":false,"fork":false,"pushed_at":"2013-05-14T15:05:50.000Z","size":128,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-15T17:19:11.701Z","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/joakin.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-05-14T09:26:17.000Z","updated_at":"2013-10-07T12:43:06.000Z","dependencies_parsed_at":"2022-09-07T03:40:54.401Z","dependency_job_id":null,"html_url":"https://github.com/joakin/backbone-basics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joakin%2Fbackbone-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joakin%2Fbackbone-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joakin%2Fbackbone-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joakin%2Fbackbone-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joakin","download_url":"https://codeload.github.com/joakin/backbone-basics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393573,"owners_count":20931813,"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-10-09T17:09:08.197Z","updated_at":"2025-04-05T20:15:38.714Z","avatar_url":"https://github.com/joakin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## Backbone Basics\n\nBasics library for developing backbone applications.\n\n**This is a work in progress**\n\n## Contents\n\nBasics exports this structures:\n\n```javascript\nBasics.Model\nBasics.Collection\nBasics.View\n```\n\nThis is what this library provides to help:\n\n### Nested data structures\n\nTo define nested structures:\n\n```javascript\nvar Person = Basics.Model.Extend({\n  defaults: {\n    name: '',\n    email: ''\n  }\n})\n\nvar Message = Basics.Model.extend({\n  defaults: {\n    subject: '',\n    text: '',\n    sender: null\n  },\n  types: {\n    sender: Person\n  }\n})\n\nvar Messages = Basics.Collection.extend({\n  model: Message\n})\n\nvar Inbox = Basics.Model.extend({\n  defaults: {\n    owner: null,\n    messages: null\n  },\n  types: {\n    owner: Person,\n    messages: Messages\n  }\n})\n```\n\nWhen creating them (works both passing json to the constructor and calling the\nservice with `.fetch`):\n\n```javascript\n\n// To create it with new from a JS structure or JSON, do not forget to pass the\n// option `parse: true` at the end, or the subtypes wont be parsed\nvar inbox = new Inbox({\n  owner: {\n    name: 'John',\n    email: 'john@example.com'\n  },\n  messages: [{\n    subject: 'Example 1',\n    text: 'Text 1',\n    sender: {\n      name: 'John',\n      email: 'john@example.com'\n    }\n  }, {\n    subject: 'Example 2',\n    text: 'Text 2',\n    sender: {\n      name: 'John',\n      email: 'john@example.com'\n    }\n  }]\n}, {\n  parse: true\n})\n\nvar ownerName = inbox.get('owner').get('name')\n  , secondMessageSubject = inbox.get('messages').at(1).get('subject')\n\nexpect(ownerName).to.eql('John')\nexpect(secondMessageSubject).to.eql('Example 2')\n```\n\nIf you try to create a full empty object to bind it to forms/views, then the\nway above wont work. You need the special option `unfold: true` like this:\n\n```javascript\n\n// Previous behaviour, parse subtypes but conform the defaults (do not expand\n// empty properties to its subtypes\nvar inbox1 = new Inbox(null, { parse: true })\n\nexpect(inbox1.get('owner')).to.be.a('null')\nexpect(inbox1.get('messages')).to.be.a('null')\n\n// If we want the subtypes to be parsed and unfolded\nvar inbox2 = new Inbox(null, { parse: true, unfold: true })\n\nvar owner = inbox2.get('owner')\n  , messages = inbox2.get('messages')\n\nexpect(owner).to.be.an.instanceof(Person)\nexpect(owner.get('name')).to.eql('')\nexpect(messages).to.be.an.instanceof(Messages)\nexpect(messages.length).to.eql(0)\n```\n\n### Mixin objects\n\nBackbone provides for its types the `extend` method to create class\nhierarchies.\n\nThis is very convenient, but very convenient also is taking advantage of\njavascript and using mixins to extract functionality that is independent and\ncommon through classes but does not relate to them in a hierarchical way.\n\nAll types from basics have a `mixin` method that allows them to mixin with JS\nobjects that contain variables/functions that encapsulate functionality. The\nmixin method is added to the types, not the instances.\n\nYou can use it like this:\n\n```javascript\n/*\n * Mixin asOneTimeModal\n *\n * Makes a view behave as a one time modal when calling a `show` method.\n *\n * Mixes a `show` method, when the modal is closed the view will be\n * automatically removed.\n *\n * Mixes a `hide` method, that will hide the modal and remove the view\n * afterwards\n *\n * It also mixes a template for the modal as `modalTemplate`\n */\nvar asOneTimeModal = {\n  modalTemplate: _.template(modalTemplateSource),\n  events: {\n    'click .modal-header .close'    : 'hide',\n    'click .modal-footer .btn-close': 'hide'\n  },\n  show: function() {\n    var $m = this.$('.modal').modal({})\n    $m.on('hidden', _.bind(this.remove, this))\n  },\n  hide: function() {\n    this.$('.modal').modal('hide')\n    this.trigger('close:modal')\n  }\n}\n\n/*\n * Sample View AddPerson\n *\n * This would be a add person view with a form, and we want it to act as\n * a modal using our mixin\n */\nvar AddPersonView = Basics.View.extend({\n  events: {\n    'click .submitModal': 'addPersonClick'\n  },\n  initialize: function(options) {\n    // [...] Here goes code\n  },\n  // [...] Here go methods and event handlers\n  addPersonClick: function(event) {\n    // [...]\n  }\n}).mixin(asOneTimeModal)\n\nvar newGuy = new Person()\nvar addPersonForm = new AddPersonView({ model: newGuy })\n\n// Now the add person form behaves as a modal, and that functionality can be\n// reused in any type even if they are not connected\naddPersonForm.show() // \u003e Shows the modal on the page\n```\n\nThe same ideas can be applied to models and collections. For example to create\nPageable collections, lazy loading models, etc. There may be some basic mixins\nincluded in Basics in the future to be mixed with the basics types.\n\n## Usage\n\n### From a browserify enabled client side module\n\nIf you are developing a module or application and using browserify as a module\nloader, then just include backbone-basics on the `package.json` as a\ndependency, and require it normally.\n\n### From a server side node.js module\n\nSame as above. Declare the dependency on the `package.json` of your module/app\nand require it normally.\n\n### From a browser side application that does NOT use browserify\n\nYou have to grab the file `browser/backbone-basics.js` or\n`browser/backbone-basics-min.js` and include it on your page after the\nrequired dependencies. It will define a global variable on the window object\ncalled `Basics`, that you can use then normally.\n\n## Development\n\nTo get the dependencies do a `npm install`\n\nSource is on the `src` folder.\n\nTests on the `test` folder.\n\nMake actions:\n* Compile: `make compile`\n* Test: `make test`\n* Tests watcher: `make test-w`\n\n## TODO\n\nAt the root of the source there is a TODO file.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoakin%2Fbackbone-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoakin%2Fbackbone-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoakin%2Fbackbone-basics/lists"}