{"id":19504829,"url":"https://github.com/nice-digital/hyperbone-router","last_synced_at":"2025-02-25T22:12:59.385Z","repository":{"id":74446229,"uuid":"109390120","full_name":"nice-digital/hyperbone-router","owner":"nice-digital","description":"Used by Publications. Routing, Hyperbone Style. Sort of.","archived":false,"fork":false,"pushed_at":"2015-04-07T14:47:57.000Z","size":288,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-08T10:45:31.896Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"green-mesa/hyperbone-router","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nice-digital.png","metadata":{"files":{"readme":"Readme.md","changelog":"History.md","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":"2017-11-03T11:55:00.000Z","updated_at":"2023-12-22T12:41:28.000Z","dependencies_parsed_at":"2023-02-27T03:01:01.608Z","dependency_job_id":null,"html_url":"https://github.com/nice-digital/hyperbone-router","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nice-digital%2Fhyperbone-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nice-digital%2Fhyperbone-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nice-digital%2Fhyperbone-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nice-digital%2Fhyperbone-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nice-digital","download_url":"https://codeload.github.com/nice-digital/hyperbone-router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240754366,"owners_count":19852189,"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-11-10T22:27:21.929Z","updated_at":"2025-02-25T22:12:59.307Z","avatar_url":"https://github.com/nice-digital.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hyperbone Router\n\n## This is no longer being maintained. \n\nIt has been replaced by [HalogenJS](https://github.com/halogenjs/router) \n\n[![Build Status](https://travis-ci.org/green-mesa/hyperbone-router.png?branch=master)](https://travis-ci.org/green-mesa/hyperbone-router)\n\nOf all the parts of Hyperbone, this is probably the most peculiar and least necessary: Hyperbone is made of individual modules and just about any router will do in place of this.\n\nHowever, right now, we need a router that supports express style routes **and** hashbangs, so this is what this is for. It's also designed to be at least in the Hyperbone family - it makes use of Hyperbone events for registering callbacks. Page activation and page teardown are the priority rather than server side style middleware. \n## Features\n\n- Hashbang based because the particular usecase we have for this module requires this\n- Express/Sinatra style route syntax `/blah/:someparam/:someotherparam` etc\n- Hyperbone event based. `on('activate', fn)`\n- Some handy conventions for Hyperbone models\n\n## Installation\n\nBrowserify\n\n```sh\n$ npm install --save hyperbone-router\n```\n\n## Tests\n\nClone the repo, do an npm install, install grunt-cli if you don't already have it then\n```js\n$ npm test\n```\n\n## Example Usage\n\nThis example is how this router might be used with Hyperbone Model and Hyperbone View for a single screen application that has multiple virtual pages. We start with an application model that contains a separate model for each route, and then we bind the HTML to that model. Using the `hb-with` attribute we can turn sections of the HTML into partials for each route model. \n\nEvery time a route is activated we update the model for that route. That could be via code or by updating the uri and then fetching from a server. Either way the view is updated automatically.\n\nSetting up the application model and the view...\n\n```js\nvar Router = require('hyperbone-router').Router;\n\n// our appModel contains two models\nvar appModel = new HyperboneModel({\n\t// our list of products. Note the HAL hypermedia..\n\tproductList : [\n\t\t{\n\t\t\t_links : {\n\t\t\t\tself : {\n\t\t\t\t\thref : \"/products/product-1\"\n\t\t\t\t}\n\t\t\t},\n\t\t\ttitle : \"Some product\"\n\t\t},\n\t\t{\n\t\t\t_links : {\n\t\t\t\tself : {\n\t\t\t\t\thref : \"/products/product-1\"\n\t\t\t\t}\n\t\t\t},\n\t\t\ttitle : \"Some other product\"\n\t\t}\n\t]\n\t// a stub model for the product route\n\tproduct : {\n\t\tactive : false\n\t},\n\t// a stub model for the resource route\n\tresource : {\n\t\tactive : false\n\t}\n});\n\n// bind our application model to our HTML\nvar view = new HyperboneView({\n\tel : '#application-root',\n\tmodel : appModel\n});\n```\n\nThis is some example HTML. It shows how we render the list of products, taking advantage of the hypermedia extensions to get the correct uri and using `hb-with` to change the scope from the application model to our route models. \n\nThe `if=\"active\"` means that if product.active is true then the product section element will be displayed. \n\n```html\n\u003csection id=\"applications-root\"\u003e\n\t\u003csection\u003e\n\t\t\u003cul hb-with=\"product-list\"\u003e\n\t\t\t\u003cli\u003e\u003ca href=\"#!{{url()}}\"\u003eProduct: {{title}}\u003c/a\u003e\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/section\u003e\n\t\u003csection hb-with=\"product\" if=\"active\"\u003e\n\t\t\u003ch3\u003eI'm the product route. This is product ID {{id}}\u003c/h3\u003e\n\t\t\u003cul hb-with=\"resource-list\"\u003e\n\t\t\t\u003cli\u003e\u003ca href=\"#!{{url()}}\"\u003eResources in our product: {{title}}\u003c/a\u003e\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/section\u003e\n\t\u003csection hb-with=\"resource\" if=\"active\"\u003e\n\t\t\u003ch3\u003e{{title}}\u003c/h3\u003e\n\t\t\u003cp\u003e{{description}}\u003c/p\u003e\n\t\u003c/section\u003e\n\u003c/section\u003e\n```\nNow we need to do a little more coding to set up our logic around handling various routes. This is *not* our business logic - we just want to make sure the right section is displayed depending on the route. \n\nWe don't care here about anything that happens after we've loaded data from a server, or what happens while we're on a particular route.\n```js\nvar app = new Router();\n\napp\n\t.route('/products/:id') // this route will match any products\n\t\t.on('activate', function(ctx, uri){\n\t\t\t// ctx is our context. it has any params gathered from the route.\n\t\t\t// see component/page.js for more\n\t\t\t\n\t\t\t// set active as true so that the product section is displayed\n\t\t\tappModel.set('product.active', true);\n\t\t\t\n\t\t\t// set the id part of the url as an attribute on our model\n\t\t\tappModel.set('product.id', ctx.id);\n\t\t\t\n\t\t\t// update the uri for the product model\n\t\t\t// and trigger a load from the server...\n\t\t\tappModel.get('product')\n\t\t\t\t.url(uri)\n\t\t\t\t.fetch();\n\n\t\t})\n\t\t.on('deactivate', function(uri){\n\t\t\t\n\t\t\t// set product.active to false which \n\t\t\t// because of our 'if' attribute will\n\t\t\t// hide the product section\n\t\t\tappModel.set('product.active', false);\n\t\t})\n\t.route('/resources/:id') // this route will match any resources\n\t\t.on('activate', function(ctx, uri){\n\n\t\t\t// same again for resources but in a slightly\n\t\t\t// different style\n\t\t\tvar resources = appModel.get('resource');\n\t\t\tresource\n\t\t\t\t.set({\n\t\t\t\t\tid : ctx.id,\n\t\t\t\t\tactive : true\n\t\t\t\t})\n\t\t\t\t.url(uri)\n\t\t\t\t.fetch();\n\n\t\t})\n\t\t.on('deactivate', function(uri){\n\n\t\t\tvar resource = appModel.get('resource');\n\t\t\tresource.set('active', false);\n\n\t\t});\n// finally we want the application to start listening for hashchange (History API support may come later)\napp.listen();\n```\n\nBecause marking a route `active = true` and `active = false` is always going to be necessary, Hyperbone Router can do this for you. If you pass a model when defining the route, it will automatically add an activate and deactivate handler that toggles 'active' on and off. \n\n```js\napp\n\t.route('/product/:id', appModel.get('product'))\n\t\t.on('activate', function( ctx, uri ){\n\t\t\tvar product = appModel.get('product');\n\t\t\tproduct.url( uri );\n\t\t\tproduct.set('id', ctx.id);\n\t\t\tproduct.fetch();\n\t\t})\n\t.route('/resource/:id', appModel.get('resource'))\n\t\t.on('activate', function( ctx, uri ){\n\t\t\tvar resource = appModel.get('resource');\n\t\t\tresource.url( uri );\n\t\t\tproduct.set('id', ctx.id);\n\t\t\tproduct.fetch();\n\t\t})\n\t.listen();\n```\n\n## API\n\n### Router()\n\nCreate a new Router instance\n\n### Router#route( path )\n\nCreate a new route. \n\n### Router#route( path, model )\n\nCreate a new route and use some default activate/deactivate handlers to toggle the 'active' attribute true and false. This can be used in your view to turn sections of the page on and off. \n\n### Router#route( path [, model]).on( event, callback )\n\nA route is a Hyperbone event emitter. The two significant events are 'activate' and 'deactivate'. Activate handlers are passed a context object `ctx` which contains the paramters of the url as per PageJS. It is shared between all activate handlers for that route. You can register as many activate handlers as you like. \n\n### Router#listen()\n\nBegin listening for routes\n\n### Router#navigateTo(uri, options)\n### require('hyperbone-router').navigateTo(uri, options)\n\nNavigate to a different route. If you want to make sure that the route handlers fire even if the route hasn't changed, use `{trigger : true}` as per Backbone as `options`.\n\n\n\n## License\n\n  MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnice-digital%2Fhyperbone-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnice-digital%2Fhyperbone-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnice-digital%2Fhyperbone-router/lists"}