{"id":30343974,"url":"https://github.com/tarmann/backbonejs-patterns","last_synced_at":"2026-02-12T17:01:45.023Z","repository":{"id":11067608,"uuid":"13410409","full_name":"tarmann/backbonejs-patterns","owner":"tarmann","description":"Good practices that our team has learned along the way building Backbone applications.","archived":false,"fork":false,"pushed_at":"2017-08-03T10:54:38.000Z","size":54,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-18T12:01:02.334Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/tarmann.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":"2013-10-08T10:31:12.000Z","updated_at":"2017-08-03T10:54:39.000Z","dependencies_parsed_at":"2022-09-01T20:40:47.967Z","dependency_job_id":null,"html_url":"https://github.com/tarmann/backbonejs-patterns","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tarmann/backbonejs-patterns","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarmann%2Fbackbonejs-patterns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarmann%2Fbackbonejs-patterns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarmann%2Fbackbonejs-patterns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarmann%2Fbackbonejs-patterns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tarmann","download_url":"https://codeload.github.com/tarmann/backbonejs-patterns/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarmann%2Fbackbonejs-patterns/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29373837,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T08:51:36.827Z","status":"ssl_error","status_checked_at":"2026-02-12T08:51:26.849Z","response_time":55,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2025-08-18T11:52:37.294Z","updated_at":"2026-02-12T17:01:45.005Z","avatar_url":"https://github.com/tarmann.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"Backbone.js Patterns\n===================\n\nGood practices that our team has learned along the way building Backbone applications.\n\n**Related Articles**\n\n* [Smashing Magazine: Backbone.js Tips And Patterns](http://coding.smashingmagazine.com/2013/08/09/backbone-js-tips-patterns/)\n* [Rico Sta. Cruz: Backbone patterns](http://ricostacruz.com/backbone-patterns/)\n\n## Style Guide\n\n### Event Naming Convention\n\nHere's the list of custom events that can be used with any Model.\n\n* empty:\\[attribute\\] (model) — when a specific attribute becomes empty.\n* notempty:\\[attribute\\] (model) — when a specific attribute is not empty anymore.\n\n### Variables and Method Naming Conventions\n\n#### viewData (object)\n\nObject containing attributes to be sent to the template.\n\n```js\nvar Bookmark = Backbone.View.extend({\n  template: _.template(…),\n    render: function () {\n      var viewData = _.extend(this.viewOptions, this.model.toJSON());\n      this.$el.html( this.template( viewData ) );\n      return this;\n    }\n});\n```\n\n#### removeEl (method)\n\nUsed as a proxy for view.remove in cases where you need an animation or perform some action before remove the view.\n\n#### onInitialize (method)\n\nWhenever you extend a Class on Backbone and you want to keep the original behavior on the constructor, use onInitialize.\n\n#### onRender (method)\n\nWhenever you extend a View on Backbone and you want to keep the original behavior on the render method, use onRender.\n\n#### onInvalid (method)\n\n## Patterns\n\n### Model Patterns\n\n#### Model Validation\n\n```js\nvar Person = Backbone.Model.extend({\n\tvalidate: function(attrs, options) {\n\t\tthis.errors = [];\n\n\t\tif(attrs.name === ''){\n\t\t  this.errors.push('error:name:empty');\n\t\t}\n\n\t\tif(this.errors.length \u003e 0) return this.errors;\n\t}\n});\n```\n\n#### Persisting an Collection\n\nWhenever you need to save an entire Collection, you should have a Model as wrapper that will be the context. Than you can save it as an attribute. You can have a Backbone Collection as a property of the Model and bind it to the attribute to reflect changes.\n\nUse set instead of reset when the collection changes on the attributes, this will trigger all the events like change, remove and add on the models.\n\nThe `remove` event on the Collection doesn't trigger `destroy` on the Model. So if you need to have it reflected on a model that is binded to a view, you should trigger `remove` on the model and listen on the view.\n\n```js\nvar MyModel = Backbone.View.extend{    \n\tinitialize: function(){\n\t    this.elementsCollection.on({\n\t        'remove': this.onRemoveElement\n\t    }, this);\n\t},\t\n\n    onRemoveElement: function(model, collection, options){\n        model.trigger('remove', model);\n    },\n\n    updateElementsCollection: function(model){\n        this.elementsCollection = this.elementsCollection || new SD.Collection.ErfxElement();\n        this.elementsCollection.set( this.get('Elements') );\n        this.elementsCollection.parentModel = this;\n    }\n});\n```\n\n#### Persisting an Collection (Alternative)\n\nAs alternative, save the collection by extending Backbone.\n\n```js\nvar Groups = Backbone.Collection.extend({\n  model: Group,\n  url: function() {\n    return '/groups/'; \n  },\n  save: function(){\n    Backbone.sync('create', this, {\n      success: function() {\n        console.log('Saved!');\n      }\n    });\n  }\n});\n```\n\n```\nSend updated collection of elements as an attribure\nPUT collection/{id} - Model (Subcollection)\n{ Subcollection: [ { ... }, { ... } ] }\n\nSend only new elements as collection to elements resource\nPOST collection/{id}/subcollection (Collection)\n[ { ... }, { ... } ]\n\nUpdate entire collection sending it to elements resource\nPUT collection/{id}/subcollection (Collection)\n[ { id: 1 }, { id: 2 }, { ... }, { ... } ]\n```\n\n***Related links***\n\n* [\"How\" to save an entire collection in Backbone.js - Backbone.sync or jQuery.ajax?](http://stackoverflow.com/questions/6879138/how-to-save-an-entire-collection-in-backbone-js-backbone-sync-or-jquery-ajax)\n* [How to design a RESTful collection resource](http://stackoverflow.com/questions/2810652/how-to-design-a-restful-collection-resource)\n* [Backbone.js Save Collections](http://c2journal.com/2013/03/23/backbone-js-save-collections/)\n\n### View Patterns\n\n#### Render Element Attributes\n\n```js\nvar Person = Backbone.View.extend({\t\n\trenderAttr: function(){\n\t\tvar attrs = {\n\t\t\t'id': 'my-element-' + this.model.attributes.id,\n\t\t\t'data-id': this.model.attributes.id,\n\t\t};\n\n\t\t_.each(attrs, function(value, name){\n\t\t\tthis.$el.attr(name, value);\n\t\t}, this);\n\t}\n});\n```\n\n## Extending Backbone\n\n### Dispatcher\n\nDocumentation pending.\n\n### Views\n\n#### dataBinding\n\nOne way bind model attributes to a view element.\n\n#### renderElement\n\nRender a piece of the View based on a provided selector.\n\nRename renderElement to renderEl to keep consistency with backbone styleguide.\n\n```js\nthis.renderElement('.name');\n```\n\n#### registerPartials\n\nDocumentation pending.\n\n#### scrollToElement\n\nDocumentation pending.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarmann%2Fbackbonejs-patterns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftarmann%2Fbackbonejs-patterns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarmann%2Fbackbonejs-patterns/lists"}