Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

blog(embertimes154): ember-stargate #697

Merged
merged 4 commits into from
Jun 25, 2020
Merged

blog(embertimes154): ember-stargate #697

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fcdc61a
blog(embertimes154): ember-stargate
chrisrng Jun 25, 2020
08b99c0
Update source/2020-06-26-the-ember-times-issue-154.md
chrisrng Jun 25, 2020
fb5c631
Update source/2020-06-26-the-ember-times-issue-154.md
chrisrng Jun 25, 2020
dd6df77
Update source/2020-06-26-the-ember-times-issue-154.md
chrisrng Jun 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 28 additions & 9 deletions source/2020-06-26-the-ember-times-issue-154.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: The Ember Times - Issue No. 154
author: the crowd
author: Chris Ng, the crowd
tags: Recent Posts, Newsletter, Ember.js Times, Ember Times, 2020
alias : "blog/2020/06/26-the-ember-times-issue-154.html"
responsive: true
Expand All @@ -9,19 +9,38 @@ responsive: true
<SAYING-HELLO-IN-YOUR-FAVORITE-LANGUAGE> Emberistas! 🐹

<SOME-INTRO-HERE-TO-KEEP-THEM-SUBSCRIBERS-READING>

Check out the new addon ember-stargate 🌟!
READMORE

---

## [Section title in sentence case 🐹](section-url)
## [Get Ready for ember-stargate 🌟](https://twitter.com/simonihmig/status/1274066847873273859)

<change section title emoji>
<consider adding some bold to your paragraph>
<please include link to external article/repo/etc in paragraph / body text, not just header title above>
[Simon Ihmig (@simonihmig)](https://github.com/simonihmig) announced a new addon called [ember-stargate](https://github.com/kaliber5/ember-stargate) – a modern and lightweight take on portals in Ember.

<add your name to author list, top and bottom>
<add blurb and emoji to "SOME-INTRO-HERE">
“Portals” are a way to render things in a different place of the DOM tree than they are logically defined in the app. There are a number of existing solutions in the Ember ecosystem for the same problem such as [ember-wormhole](https://github.com/yapplabs/ember-wormhole), [ember-elsewhere](https://github.com/ef4/ember-elsewhere), the native `{{in-element}}` (previously using the [ember-in-element-polyfill](https://github.com/ember-polyfills/ember-in-element-polyfill)).

The `ember-stargate` addon aims to solve this problem without using private APIs, Ember's `component` helper, or having to jump through hoops to implement. All you need to make a portal work is to define the content that should be sent through the portal using `<Portal @target="some-target">`, and the target - identified by its name - where it should be rendered to using `<PortalTarget @name="some-target">`.

For example, suppose you want to update the footer in `application.hbs` from a child route:

Route:
chrisrng marked this conversation as resolved.
Show resolved Hide resolved

```hbs
<Portal @target="footer-title">Step 1</Portal>
```

Application:
chrisrng marked this conversation as resolved.
Show resolved Hide resolved

```hbs
{{outlet}}

<footer class="sticky-footer">
<PortalTarget @name="footer-title" class="sticky-footer__title" />
</footer>
```

Read more and try it out at [kaliber5/ember-stargate](https://github.com/kaliber5/ember-stargate)!

---

Expand Down Expand Up @@ -139,4 +158,4 @@ That's another wrap! ✨

Be kind,

the crowd and the Learning Team
Chris Ng, the crowd and the Learning Team