Passing attributes into a #with helper

Questions General
1

From my understanding of the #with helper it will return an html formatted string by default as div element. Below is an example of some code in which I need to include 2 custom html data-attributes to the containing div that the component will be wrapped in. Does the #with helper allow for this type of functionality?

28%20AM
28%20AM1216Ă—810 38.5 KB

2

The with helper doesn’t render anything. All it does is define a name (item in your example) for local use. These two are almost exactly equivalent:

{{#with computedVal as |item|}} 
  {{someComponent location=item.location class=“someClass” }} 
{{/with}}

{{someComponent location=computedVal.location class=“someClass” }}

(The “almost” is because the with helper doesn’t render its block when computedVal is falsy. This is generally considered a confusing footgun, and the newer let helper exists to avoid this issue.)

If you’re seeing an extra div in your output, it’s not because of the with helper. It’s probably because you’re inside an Ember Component and the component itself always gets a wrapping element. Your options are:

  • keep using an Ember Component, and use Component’s javascript API to customize the element. See “Customizing a Component’s HTML Element in JavaScript” on this page.
  • set tagName: "" on your Ember Component. This eliminates the wrapping div, but it also means some APIs (like this.element and this.$()) aren’t allowed in your Javascript file, so may not work for your case.
  • upgrade to a Glimmer Component, which never gets a wrapping div. This is the newer way to write components that is available in the latest Ember releases. We think it’s a better API that’s easier to learn. But if you’re on an older Ember version it may require some setup (like adding some polyfills) to use it.
1 Like
3

Awesome! Thank you for the reply & great explanations! You were correct I was in another component & I didn’t realize it. New to Ember & still wrapping my head around it. The solve was using the Components API to set attributeBindings and then passing those in with the Components usage in the hbs file.