{"id":15015822,"url":"https://github.com/kimroen/ember-cli-document-title","last_synced_at":"2025-04-04T09:08:40.504Z","repository":{"id":18350045,"uuid":"21529899","full_name":"kimroen/ember-cli-document-title","owner":"kimroen","description":"Adding document title behaviour to your ember app","archived":false,"fork":false,"pushed_at":"2023-01-17T14:36:03.000Z","size":676,"stargazers_count":215,"open_issues_count":42,"forks_count":61,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-28T08:09:34.274Z","etag":null,"topics":["ember","ember-addon","javascript"],"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/kimroen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2014-07-05T23:21:48.000Z","updated_at":"2024-11-13T11:07:10.000Z","dependencies_parsed_at":"2023-02-10T10:15:36.734Z","dependency_job_id":null,"html_url":"https://github.com/kimroen/ember-cli-document-title","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/kimroen%2Fember-cli-document-title","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimroen%2Fember-cli-document-title/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimroen%2Fember-cli-document-title/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimroen%2Fember-cli-document-title/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kimroen","download_url":"https://codeload.github.com/kimroen/ember-cli-document-title/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247149501,"owners_count":20891954,"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":["ember","ember-addon","javascript"],"created_at":"2024-09-24T19:48:00.293Z","updated_at":"2025-04-04T09:08:40.480Z","avatar_url":"https://github.com/kimroen.png","language":"JavaScript","readme":"# Sane Document Title [![Build Status](https://travis-ci.org/kimroen/ember-cli-document-title.svg?branch=master)](https://travis-ci.org/kimroen/ember-cli-document-title) [![Ember Observer Score](http://emberobserver.com/badges/ember-cli-document-title.svg)](http://emberobserver.com/addons/ember-cli-document-title) [![Code Climate](https://codeclimate.com/github/kimroen/ember-cli-document-title/badges/gpa.svg)](https://codeclimate.com/github/kimroen/ember-cli-document-title)\nThis addon adds sane `document.title` integration to your ember app.\n\nOriginally based on [this gist by @machty](https://gist.github.com/machty/8413411), and since improved upon by many fabulous contributors.\n\nTested to work with Ember 1.13.13 and up.\n\n## Install\nInstall by running\n\n```\nember install ember-cli-document-title\n```\n\n## So, how does this work?\nThis adds two new keys to your routes:\n\n1. `titleToken`\n2. `title`\n\nThey can be either strings or functions.\n\nEvery time you transition to a route, the following will happen:\n\n1. Ember will collect the `titleToken`s from your leafmost route and\n   bubble them up until it hits a route that has `title` defined.\n   `titleToken` is the name of the route's model by default.\n2. If `title` is a string, that will be used as the document title\n3. If `title` is a function, the collected `titleToken`s will be passed\n   to it in an array.\n4. What is returned from the `title` function is used as the document\n   title.\n\n## Examples!\n\n### Simple, static titles\nIf you just put strings as the `title` for all your routes, that will be\nused as the title for it.\n\n```js\n// routes/posts.js\nexport default Ember.Route.extend({\n  title: 'Our Favorite posts!'\n});\n\n// routes/post.js\nexport default Ember.Route.extend({\n  title: 'Please enjoy this post'\n});\n```\n\n### Dynamic segments with a static part\nLet's say you want something like \"Posts - My Blog\", with \"- My Blog\"\nbeing static, and \"Posts\" being something you define on each route.\n\n```js\n// routes/posts.js\nexport default Ember.Route.extend({\n  titleToken: 'Posts'\n});\n```\n\nThis will be collected and bubble up until it hits the Application Route\n```js\n// routes/application.js\nexport default Ember.Route.extend({\n  title: function(tokens) {\n    return tokens.join(' - ') + ' - My Blog';\n  }\n});\n```\n\n### Dynamic title based on model info\nIn this example, we want something like \"Name of current post - Posts -\nMy Blog\".\n\nLet's say we have this object as our post-model:\n\n```js\nEmber.Object.create({\n  name: 'Ember is Omakase'\n});\n```\nAnd we want to use the name of each post in the title.\n\n```js\n// routes/post.js\nexport default Ember.Route.extend({\n  titleToken: function(model) {\n    return model.get('name');\n  }\n});\n```\n\nThis will then bubble up until it reaches our Posts Route:\n\n```js\n// routes/posts.js\nexport default Ember.Route.extend({\n  titleToken: 'Posts'\n});\n```\n\nAnd continue to the Application Route:\n\n```js\n// routes/application.js\nexport default Ember.Route.extend({\n  title: function(tokens) {\n   tokens = Ember.makeArray(tokens);\n   tokens.unshift('My Blog');\n   return tokens.reverse().join(' - ');\n  }\n});\n```\n\nThis will result in these titles:\n- On /posts - \"Posts - My Blog\"\n- On /posts/1 - \"Ember is Omakase - Posts - My Blog\"\n\n### Async titles using promises\nYou may be in a situation where it makes sense to have one or more of your `titleToken`s be asynchronous. For example if a related model is async, or you just enjoy working with Promises in your past-time.\n\nLuckily, you can return a promise from any of your `titleToken` functions, and they will all be resolved by the time your `title` function receives them.\n\nAn example! Let's say we have these two Ember Data models; a `post` and its `user`:\n\n```js\n// models/post.js\nexport default DS.Model.extend({\n  name: DS.attr('string'),\n  author: DS.belongsTo('user', { async: true })\n});\n```\n\n```js\n// models/user.js\nexport default DS.Model.extend({\n  firstName: DS.attr('string'),\n  lastName: DS.attr('string')\n});\n```\n\nIn our document title, we want the name of the author in parenthesis along with the post title.\n\nThe `author` relationship is `async`, so getting it will return a promise. Here's\nan example where we return a promise that resolves to the post name plus the author\nname in parenthesis:\n\n```js\n// routes/post.js\nexport default Ember.Route.extend({\n  titleToken: function(model) {\n    var postName = model.get('name');\n\n    return model.get('author')\n      .then(function (user) {\n        var authorName = user.get('firstName') + user.get('lastName');\n\n        return postName + '(by ' + authorName + ')';\n      });\n  }\n});\n```\n\nWith the same configuration for `Posts` and `Application` routes as in the previous example, this will result in this title:\n- On /posts/1 - \"Ember is Omakase (by John Smith) - Posts - My Blog\"\n\nIt's worth noting that the page title will not update until all the promises have resolved.\n\n### Use with `ember-cli-head`\n\nUsing `ember-cli-document-title` with [ember-cli-head](https://github.com/ronco/ember-cli-head)\nis very straight forward and allows you to use the wonderful route based declarative API for\n`title` and still easily add other things to the document's `\u003chead\u003e` (i.e. `meta` tags).\n\nOnly a few tweaks are needed to use both of these addons together:\n\n* Install both addons:\n\n```sh\nember install ember-cli-head\nember install ember-cli-document-title\n```\n\n* Add `headData` and `setTitle` to your `app/router.js`:\n\n```js\nconst Router = Ember.Router.extend({\n  location: config.locationType,\n  headData: Ember.inject.service(),\n\n  setTitle(title) {\n    this.get('headData').set('title', title);\n  }\n});\n```\n\n* Remove `\u003ctitle\u003e` from your `app/index.html`.\n\n* Update `app/templates/head.hbs` (added by ember-cli-head):\n\n```hbs\n{{! app/templates/head.hbs }}\n\n\u003ctitle\u003e{{model.title}}\u003c/title\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimroen%2Fember-cli-document-title","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkimroen%2Fember-cli-document-title","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimroen%2Fember-cli-document-title/lists"}