{"id":23161018,"url":"https://github.com/steverandy/backbone.managedview","last_synced_at":"2025-08-18T02:31:57.670Z","repository":{"id":6442935,"uuid":"7682321","full_name":"steverandy/backbone.managedview","owner":"steverandy","description":"It is an extension for Backbone.View, which adds views management logic and structure","archived":false,"fork":false,"pushed_at":"2013-12-21T08:10:06.000Z","size":392,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T18:11:43.964Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","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/steverandy.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-01-18T07:23:43.000Z","updated_at":"2013-12-21T08:10:06.000Z","dependencies_parsed_at":"2022-08-30T20:20:15.299Z","dependency_job_id":null,"html_url":"https://github.com/steverandy/backbone.managedview","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/steverandy/backbone.managedview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steverandy%2Fbackbone.managedview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steverandy%2Fbackbone.managedview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steverandy%2Fbackbone.managedview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steverandy%2Fbackbone.managedview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steverandy","download_url":"https://codeload.github.com/steverandy/backbone.managedview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steverandy%2Fbackbone.managedview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270933675,"owners_count":24670471,"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","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":"2024-12-17T23:13:04.420Z","updated_at":"2025-08-18T02:31:57.329Z","avatar_url":"https://github.com/steverandy.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"It is an extension for Backbone.View, which adds views management logic and structure. It's common for a view to have multiple subviews, but in Backbone.View managing subviews has to be done manually. This extension manages rendering a view and its subviews. When a view is removed, this extension also manages the subviews removal.\n\n## API\n\n### manage\n\nWhen set to `true`, view rendering and removing will be managed. Set to `false` if you need the default behavior of Backbone.View.\n\n### insert\n\nIt determines how a view will be inserted to the DOM. For top level view, insert should be defined as a function.\n\n```coffee\ninsert: =\u003e\n  $(\"body\").append @el\n```\n\nFor item view, insert should be defined as a string — `\"append\"` or `\"prepend\"`. The default value is `\"append\"`.\n\n```coffee\ninsert: \"prepend\"\n```\n\n### views\n\nIt is a hash that keeps track of subviews. The key is the name of the view or a selector where the view will inserted to the DOM. The value is the subview object itself.\n\n```coffee\nlayoutView = new App.Views.Layout\nlayoutView.views[\"header.main\"] = new App.Views.Components.MainHeader\nlayoutView.views[\"#content\"] = new App.Views.Lists\nlayoutView.views[\"footer.main\"] = new App.Views.Components.MainFooter\n```\n\nThe `views` hash value can also be an array. This can be used when constructing list type view.\n\n```coffee\nlistsView = new App.Views.Lists\nlistsView.views[\"#lists\"] = []\n@lists.each (list) =\u003e\n  listsView.views[\"#lists\"].push new App.Views.Components.List\n    model: list\n```\n\n#### Ways to set views\n\n```coffee\nclass App.Views.Layout extends Backbone.View\n  views:\n    \"#content\": new App.Views.Lists\n```\n\n```coffee\nclass App.Views.Layout extends Backbone.View\n  initialize: -\u003e\n    @views[\"#content\"] = new App.Views.Lists\n```\n\n```coffee\nlayoutView = new App.Views.Layout\n  views:\n    \"#content\": new App.Views.Lists\n```\n\n```coffee\nlayoutView = new App.Views.Layout\nlayoutView.views[\"#content\"] = new App.Views.Lists\n```\n\n### beforeRender\n\nIt will be called the first during [rendering process](#rendering-process). Define this function when actions need to be performed before view element is inserted to the DOM or before template is executed.\n\n### afterRender\n\nIt will be called the last during [rendering process](#rendering-process). Define this functon when actions need to be performed after view element has been inserted to the DOM, template has been executed and subviews have been rendered. For example to setup a jQuery sortable.\n\n### beforeRemove\n\nIt will be called the first during [removing process](#removing-process).\n\n### afterRemove\n\nIt will be called the last during [removing process](#removing-process).\n\n## Events\n\nThere are two events — `render` and `remove`. Use events when actions cannot be performed in the rendering or removing callbacks.\n\n## Rendering Process\n\n`render` function is predefined, therefore there is no need to define it manually. Rendering process uses the following steps:\n\n1. Call `beforeRender`\n2. Insert to DOM\n3. Insert template\n4. Render subviews\n5. Call `afterRender`\n6. Trigger `render` event\n\n## Removing Process\n\n`remove` function is also prefined like `render`. The process uses the following steps:\n\n1. Call `beforeRemove`\n2. Remove subviews\n3. Call super\n4. Call `afterRemove`\n5. Trigger `render` event\n\n## Example\n\nDefine top level view (a layout). It has two subviews, a header and a footer.\n\n```coffee\nclass App.Views.Layout extends Backbone.View\n  id: \"app\"\n  template: _.template(\"\u003cheader\u003e\u003c/header\u003e\u003cdiv id='content'\u003e\u003c/div\u003e\u003cfooter\u003e\u003c/footer\u003e\")\n  manage: true\n  views:\n    \"header\": new App.Views.Components.Header\n    \"footer\": new App.Views.Components.Footer\n\n  insert: =\u003e\n    $(\"body\").append @el\n\n  afterRender: =\u003e\n    console.log \"rendered layout\"\n```\n\nCreate a layout and render. By calling `render`, layout will be inserted to the DOM (in body element). The subviews (header and footer) will also be rendered and replace the header and footer elements.\n\n```coffee\nlayoutView = new App.Views.Layout\nlayoutView.render()\n```\n\nWhen a layout view no longer needed, just call `remove`. It will call `remove` on all subviews and remove itself from the DOM.\n\n```coffee\nlayoutView.remove()\n```\n\n## Test Suite\n\nOpen `test/index.html` on a web browser to run the test suite.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteverandy%2Fbackbone.managedview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteverandy%2Fbackbone.managedview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteverandy%2Fbackbone.managedview/lists"}