{"id":13806494,"url":"https://github.com/knownasilya/ember-named-yields","last_synced_at":"2025-04-15T19:54:34.067Z","repository":{"id":57224088,"uuid":"53679026","full_name":"knownasilya/ember-named-yields","owner":"knownasilya","description":"Named Yields for Ember Components","archived":false,"fork":false,"pushed_at":"2024-05-30T04:08:00.000Z","size":184,"stargazers_count":18,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-15T19:54:33.134Z","etag":null,"topics":["ember","ember-addon","experimental","slots"],"latest_commit_sha":null,"homepage":"http://knownasilya.github.io/ember-named-yields/","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/knownasilya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-11T16:05:02.000Z","updated_at":"2024-05-30T04:08:04.000Z","dependencies_parsed_at":"2022-08-30T02:40:35.437Z","dependency_job_id":"02a3ec0e-8dad-4be9-b645-68137b78c36c","html_url":"https://github.com/knownasilya/ember-named-yields","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knownasilya%2Fember-named-yields","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knownasilya%2Fember-named-yields/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knownasilya%2Fember-named-yields/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knownasilya%2Fember-named-yields/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knownasilya","download_url":"https://codeload.github.com/knownasilya/ember-named-yields/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249145296,"owners_count":21219966,"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","experimental","slots"],"created_at":"2024-08-04T01:01:12.461Z","updated_at":"2025-04-15T19:54:34.047Z","avatar_url":"https://github.com/knownasilya.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":["End-user customization"],"readme":"# ember-named-yields\n\n\u003e This should not be used, we now have Named Blocks https://guides.emberjs.com/release/components/block-content/#toc_named-blocks\n\nA stop-gap for the [named yields RFC] and based off the experimentation [here].\n\n\n[![Ember Observer Score][ember-observer-badge]][ember-observer-url]\n[![NPM][npm-badge-img]][npm-badge-link]\n\n\n[Demo]\n\n## Install\n\n```no-highlight\nember install ember-named-yields\n```\n\n## Usage\n\nSetup the named yields in your component template:\n\n```hbs\n{{named-yield 'header'}}\n\n{{yield (hash\n  header=(component 'block-for' 'header')\n  footer=(component 'block-for' 'footer'\n    args=(hash name='footer')\n  )\n)}}\n\n{{named-yield 'footer'}}\n```\n\nThe `{{yield}}` is the body yield in this example.\n\n## Consume\n\nNow to use this component:\n\n```hbs\n{{#custom-card as |yields|}}\n  Body content anywhere in the main block\n\n  {{#yields.header}}\n    Header content here\n  {{/yields.header}}\n\n  {{#yields.footer as |args|}}\n    {{capitalize args.name}} content here\n  {{/yields.footer}}\n{{/custom-card}}\n```\n\n## Caveats\n\nThis named yield implementation adds extraneous DOM elements to make this work, so keep that in mind when using\nthis addon.\n\n## Advanced\n\nTopics beyond the basic usage.\n\n### Context\n\nBoth `named-yield` and `block-for` components take a second positional param which is \"optional\" since we fallback\nto a private API, i.e. `parentView`. If you don't want to use the private API, set the context manually.\n\n```hbs\n{{named-yield 'header' this}}\n\n{{yield (hash\n  header=(component 'block-for' 'header' this)\n  footer=(component 'block-for' 'footer' this)\n)}}\n\n{{named-yield 'footer' this}}\n```\n\n### Dynamic Yield Blocks\n\nTo allow more control to the end user, e.g. dynamically set the block to yield to.\n\n```hbs\n{{yield (hash\n  for=(component 'block-for')\n)}}\n```\n\nAnd can be used like so:\n\n```hbs\n{{#my-card as |yields|}}\n  {{#yields.for 'header'}}\n    Header\n  {{/yields.for}}\n{{/my-card}}\n```\n\nWhich allows using `concat` or other helpers to dynamically set the name.\n\n### Appending\n\nBy default if you call a `block-for` multiple times, it overwrites the previous content. Sometimes\nyou might want to append to the previous content.\n\n```hbs\n{{#yields.header append=true}}\n  A\n{{/yields.header}}\n\n{{#yields.header append=true}}\n  B\n{{/yields.header}}\n```\n\nNow the header will have 'AB' as it's contents.\n\n\n## Contribute\n\nSee the [CONTRIBUTING.md].\n\n[named yields RFC]: https://github.com/emberjs/rfcs/pull/72\n[here]: https://github.com/knownasilya/ember-yielded-portals\n[Demo]: http://knownasilya.github.io/ember-named-yields/\n[CONTRIBUTING.md]: CONTRIBUTING.md\n[npm-badge-img]: https://badge.fury.io/js/ember-named-yields.svg\n[npm-badge-link]: http://badge.fury.io/js/ember-named-yields\n[travis-badge]: https://travis-ci.org/knownasilya/ember-named-yields.svg\n[travis-badge-url]: https://travis-ci.org/knownasilya/ember-named-yields\n[ember-observer-badge]: http://emberobserver.com/badges/ember-named-yields.svg\n[ember-observer-url]: http://emberobserver.com/addons/ember-named-yields\n[ember-version]: https://embadge.io/v1/badge.svg?start=2.3.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknownasilya%2Fember-named-yields","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknownasilya%2Fember-named-yields","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknownasilya%2Fember-named-yields/lists"}