Assertion failed helper when I use custom yields in my application

Question

I'm using Ember v2.5.1.

I'm tryng this solution for my necessity to use two custom yields in same component:

How can I yield multiple pieces of content into an ember.js component template?

This is my code:

// component 
{{#father-component as |f|}}
  {{#f.left-content}} 
    This is a content
  {{/f.left-content}}
  {{#f.right-content}}
    This is a another content
  {{/f.right-content}}
{{/father-component}}

// father-component
<div class="left">
  {{yield (hash left-content = (component "foo-content"))}}
</div>
<div class="right">
  {{yield (hash right-content = (component "foo-content"))}}
</div>

// foo-content 
{{yield}}

In https://ember-twiddle.com/ this works nicelly, but in my localhost this dosn't works and return this error

Assertion Failed: A helper named 'f.right-content' could not be found

Some help?

I work with app exporting the components, and the path js and hbs separetly.

Edit

When I add {{log f}} in parent component this happens.

I'd double check your templates to make sure there's no typo. The fact that this works in the twiddle is an indication that it's probably a simple error. Maybe copy paste the twiddle templates / component files into your local project just to be safe. — stevenelberger, Aug 20 '19 at 16:02
Well.. I'm using ember +v2.5, I tried the two comments but still happened the same error =( `Assertion Failed: A helper named 'f.rightContent' could not be found` — MarceloBoni, Aug 20 '19 at 16:45
@MarceloBoni try logging `f` in the parent component template block: `{{log "f is: " f}}` — stevenelberger, Aug 20 '19 at 17:06
Maybe a limitation of the version I'm using? I'm creating an application in this version to test.... — MarceloBoni, Aug 20 '19 at 17:15
@MarceloBoni the twiddle version uses Ember v3.4.3. What version are you using? Seems like only one of the `yields` is coming through. — stevenelberger, Aug 20 '19 at 20:45
The twiddle version works in v2.12 to, my case is v2.5.1. I was not able to recreate the environment. — MarceloBoni, Aug 20 '19 at 20:53
Have a similar discuss in github of ember. https://github.com/emberjs/ember.js/issues/17240 — MarceloBoni, Aug 20 '19 at 21:43

score 1 · Answer 1 · answered Aug 21 '19 at 11:10

There is an issue in ember repo discussing the trick you are using for multiple yields. Robert Jackson (@rwjblue), who is a member of the ember's core team, said in a comment that this technique only worked due to a bug that has been fixed in Ember 3.6. I haven't double checked but I would guess that the bug was added after 2.5.1, which you are using. The Ember Twiddle seems to support only versions in which this bug was alive.

TL;DR: If you want to use that approach you need to upgrade to a version that has this bug included. But I would strongly advise not to do so cause it's not supported and won't work with Ember 3.6+.

It's to sad that Yieldable named blocks RFC isn't implemented yet. You could track the status in the related tracking issue. As far as I know there is also no polyfill available (yet).

Any idea how I can implement anything like this without having to take advantage of this "hack"? — MarceloBoni, Aug 21 '19 at 15:59
I think it should be fine if you yield a no-op component instead of `undefined`. But haven't tested. — jelhan, Aug 21 '19 at 20:23

Assertion failed helper when I use custom yields in my application

Edit

1 Answers1