{"id":15015974,"url":"https://github.com/asross/dynamic-link","last_synced_at":"2025-04-12T09:31:40.307Z","repository":{"id":33993119,"uuid":"37746204","full_name":"asross/dynamic-link","owner":"asross","description":"Ember addon for links whose attributes, routes, models, actions can all be changed dynamically","archived":false,"fork":false,"pushed_at":"2018-10-12T20:34:24.000Z","size":1552,"stargazers_count":14,"open_issues_count":2,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-31T11:41:31.297Z","etag":null,"topics":["component","ember","link-to"],"latest_commit_sha":null,"homepage":"http://asross.github.io/dynamic-link/","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/asross.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-19T21:13:00.000Z","updated_at":"2024-05-30T03:06:38.000Z","dependencies_parsed_at":"2022-07-13T22:43:01.581Z","dependency_job_id":null,"html_url":"https://github.com/asross/dynamic-link","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asross%2Fdynamic-link","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asross%2Fdynamic-link/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asross%2Fdynamic-link/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asross%2Fdynamic-link/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asross","download_url":"https://codeload.github.com/asross/dynamic-link/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223510342,"owners_count":17157306,"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":["component","ember","link-to"],"created_at":"2024-09-24T19:48:13.918Z","updated_at":"2024-11-07T12:03:49.437Z","avatar_url":"https://github.com/asross.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dynamic-link\n[![Dependency Status](https://david-dm.org/asross/dynamic-link.svg)](https://david-dm.org/asross/dynamic-link)\n[![Build Status](https://api.travis-ci.org/asross/dynamic-link.svg?branch=master)](https://travis-ci.org/asross/dynamic-link)\n\nDemo: [http://asross.github.io/dynamic-link/](http://asross.github.io/dynamic-link/)\n\n`dynamic-link` is an alternative to the `link-to` helper that provides more\nflexibility for dynamic parameters, including actions and literal hrefs.\n\n## Installation\n\nTo install, run:\n```\nember install dynamic-link\n```\n\n## Usage\n\n`dynamic-link` accepts parameters for `route`, `action`, `model`, `models`,\n`queryParams`, and `href`. It uses these parameters to generate the `\u003ca\u003e` tag's\n`href` and determine what happens when it is clicked.\n\nIt also supports the html attributes `title`, `rel`, `target`, and `class`\neither directly or via `className`.\n\nThis is helpful, for example, when implementing breadcrumbs or navbars, with\nlists of links that freely mix Ember routes, actions, and literal hrefs:\n\n```js\n// .js\nexport default Ember.Controller.extend({\n  editMode: false,\n  currentUser: null,\n\n  linkBar: Ember.computed('editMode', 'currentUser', function() {\n    if (this.get('editMode')) {\n      return [\n        { action: 'cancelEdit', className: 'cancel-link', text: 'Cancel' },\n        { action: 'saveChanges', className: 'submit-link', text: 'Done' }\n      ];\n    } else {\n      return [{\n        href: 'https://corporate-site.com',\n        target: '_blank',\n        text: 'Home'\n      }, {\n        route: this.get('currentUser') ? 'user.edit' : 'sign-in',\n        model: this.get('currentUser'),\n        text: this.get('currentUser') ? 'Edit Profile' : 'Sign In',\n        queryParams: this.get('currentUser') ? null : { foo: 'bar' }\n      }];\n    }\n  })\n});\n```\n\n```hbs\n{{!-- .hbs --}}\n{{#each linkParams in linkBar}}\n  {{#dynamic-link params=linkParams}}\n    {{linkParams.text}}\n  {{/dynamic-link}}\n{{/each}}\n```\n\nThis will produce either\n\n```html\n\u003ca href='#' class='cancel-link'\u003eCancel\u003c/a\u003e\n\u003ca href='#' class='submit-link'\u003eDone\u003c/a\u003e\n```\n\nif `editMode` is true, or else\n\n```html\n\u003ca href='https://corporate-site.com' target='_blank'\u003eHome\u003c/a\u003e\n\u003ca href='/users/1/edit'\u003eEdit Profile\u003c/a\u003e\n```\n\nif `currentUser` is present (with an `id` of 1), or else\n\n```html\n\u003ca href='https://corporate-site.com' target='_blank'\u003eHome\u003c/a\u003e\n\u003ca href='/sign_in?foo=bar'\u003eSign In\u003c/a\u003e\n```\n\nClicking a route-based link will transition the route without refreshing the\npage, while clicking an action link will send actions to its parent. Literal\nlinks will work normally.\n\nClick events will bubble up by default, but if you want to disable this, you\ncan pass `false` for `bubbles` or `params.bubbles`.\n\n### Passing Params Directly\n\nNote that in addition to being able to pass all of these parameters in via the\n`params` object, you can also pass them in directly:\n\n```hbs\n{{dynamic-link route=someRoute model=someModel queryParams=someQueryParams}}\n```\n\nIf any of the parameters are falsey, they will be ignored.\n\n### Multiple Dynamic Segments\n\nYou can use `dynamic-link` with multiple dynamic segments by passing in an\narray of models and/or ids to `model` or `params.model`. For example,\n\n```js\nexport default Ember.Controller.extend({\n  commentLinkParams: Ember.computed('photo.comment', function() {\n    if (this.get('photo.comment')) {\n      return {\n        route: 'photo.comment.edit',\n        model: [this.get('photo'), this.get('photo.comment')],\n        text: 'Edit Comment'\n      };\n    } else {\n      return {\n        route: 'photo.comments.new',\n        model: this.get('photo'),\n        text: 'Add Comment'\n      };\n    }\n  });\n});\n```\n\n```hbs\n{{#dynamic-link params=commentLinkParams}}\n  {{commentLinkParams.text}}\n{{/dynamic-link}}\n```\n\nmight produce\n\n```html\n\u003ca href=\"/photos/1/comments/2/edit\"\u003eEdit Comment\u003c/a\u003e\n```\n\nor just\n\n```html\n\u003ca href=\"/photos/1/comments/new\"\u003eAdd Comment\u003c/a\u003e\n```\n\n### Active Class\n\nRoute-based `dynamic-link`s have basic support for automatically adding the\n`'active'` class to the `\u003ca\u003e` tag if their parameters match the current route.\nYou can customize the class name by passing a string to `activeClass` or\n`params.activeClass`, and you can also set a default for all `dynamic-link`s by\nreopening the component and overriding `defaultActiveClass`.\n\nIf you don't wish to apply any class at all, you can pass `activeClass=false`\nto a particular link or set `defaultActiveClass: false` on the component.\n\nIf you want to customize how `dynamic-link` decides when the active class\nshould be added, you can pass a property to `activeWhen`/`params.activeWhen`:\n\n```hbs\n{{#dynamic-link activeWhen=sortDescending activeClass='highlight' action=makeSortAscending}}\n  Sort ascending\n{{/dynamic-link}}\n```\n\n## Running Tests\n\n* `git clone git@github.com:asross/dynamic-link.git`\n* `npm install \u0026\u0026 bower install`\n* `ember test`\n* `ember test --server`\n\n## Building\n\n* `ember build`\n\nFor more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasross%2Fdynamic-link","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasross%2Fdynamic-link","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasross%2Fdynamic-link/lists"}