https://github.com/knownasilya/ember-named-yields

Named Yields for Ember Components
https://github.com/knownasilya/ember-named-yields

ember ember-addon experimental slots

Last synced: about 2 months ago
JSON representation

Named Yields for Ember Components

• Host: GitHub
• URL: https://github.com/knownasilya/ember-named-yields
• Owner: knownasilya
• License: mit
• Created: 2016-03-11T16:05:02.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-02T12:59:45.000Z (about 8 years ago)
• Last Synced: 2024-05-04T13:06:37.368Z (5 months ago)
• Topics: ember, ember-addon, experimental, slots
• Language: JavaScript
• Homepage: http://knownasilya.github.io/ember-named-yields/
• Size: 178 KB
• Stars: 17
• Watchers: 4
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-ember - ember-named-yields - Named Yields for Ember.js Components. (Packages / End-user customization)

README

        
# ember-named-yields

> This should not be used, we now have Named Blocks https://guides.emberjs.com/release/components/block-content/#toc_named-blocks

A stop-gap for the [named yields RFC] and based off the experimentation [here].

[![Ember Observer Score][ember-observer-badge]][ember-observer-url]

[![NPM][npm-badge-img]][npm-badge-link]

[Demo]

## Install

```no-highlight

ember install ember-named-yields

```

## Usage

Setup the named yields in your component template:

```hbs

{{named-yield 'header'}}

{{yield (hash

  header=(component 'block-for' 'header')

  footer=(component 'block-for' 'footer'

    args=(hash name='footer')

  )

)}}

{{named-yield 'footer'}}

```

The `{{yield}}` is the body yield in this example.

## Consume

Now to use this component:

```hbs

{{#custom-card as |yields|}}

  Body content anywhere in the main block

  {{#yields.header}}

    Header content here

  {{/yields.header}}

  {{#yields.footer as |args|}}

    {{capitalize args.name}} content here

  {{/yields.footer}}

{{/custom-card}}

```

## Caveats

This named yield implementation adds extraneous DOM elements to make this work, so keep that in mind when using

this addon.

## Advanced

Topics beyond the basic usage.

### Context

Both `named-yield` and `block-for` components take a second positional param which is "optional" since we fallback

to a private API, i.e. `parentView`. If you don't want to use the private API, set the context manually.

```hbs

{{named-yield 'header' this}}

{{yield (hash

  header=(component 'block-for' 'header' this)

  footer=(component 'block-for' 'footer' this)

)}}

{{named-yield 'footer' this}}

```

### Dynamic Yield Blocks

To allow more control to the end user, e.g. dynamically set the block to yield to.

```hbs

{{yield (hash

  for=(component 'block-for')

)}}

```

And can be used like so:

```hbs

{{#my-card as |yields|}}

  {{#yields.for 'header'}}

    Header

  {{/yields.for}}

{{/my-card}}

```

Which allows using `concat` or other helpers to dynamically set the name.

### Appending

By default if you call a `block-for` multiple times, it overwrites the previous content. Sometimes

you might want to append to the previous content.

```hbs

{{#yields.header append=true}}

  A

{{/yields.header}}

{{#yields.header append=true}}

  B

{{/yields.header}}

```

Now the header will have 'AB' as it's contents.

## Contribute

See the [CONTRIBUTING.md].

[named yields RFC]: https://github.com/emberjs/rfcs/pull/72

[here]: https://github.com/knownasilya/ember-yielded-portals

[Demo]: http://knownasilya.github.io/ember-named-yields/

[CONTRIBUTING.md]: CONTRIBUTING.md

[npm-badge-img]: https://badge.fury.io/js/ember-named-yields.svg

[npm-badge-link]: http://badge.fury.io/js/ember-named-yields

[travis-badge]: https://travis-ci.org/knownasilya/ember-named-yields.svg

[travis-badge-url]: https://travis-ci.org/knownasilya/ember-named-yields

[ember-observer-badge]: http://emberobserver.com/badges/ember-named-yields.svg

[ember-observer-url]: http://emberobserver.com/addons/ember-named-yields

[ember-version]: https://embadge.io/v1/badge.svg?start=2.3.0