CODEWITHSUNDEEP
javascripttemplatesember.jsember-paper
n1ru4l
n1ru4l

Reputation: 498

[Ember.js]Pass template helpers created by template helpers as a attribute to a component in order to use it in the components template?

I am using paper-data-table which is a extension to ember-paper. Both use a technique I did not see before which I would describe as "template helpers create template helpers".

Here is a simple example of the ember-paper toolbar component

{{#paper-toolbar as |toolbar|}}
 {{#toolbar.tools}}
   {{#paper-button}}
     Go Back
   {{/paper-button}}
   <h2>Toolbar with Standard Buttons</h2>
   <span class="flex"></span>
   {{#paper-button raised=true}}
     Learn More
   {{/paper-button}}
   {{#paper-button mini=true aria-label="Favorite"}}
    {{paper-icon "favorite"}}
   {{/paper-button}}
 {{/toolbar.tools}}
{{/paper-toolbar}}

There is a new template helper created {{#paper-toolbar as |toolbar|}}. In my use-case I want to pass the row template helper which is created by the paper-data-table template helper(/component?) down to another component to encapsulate the logic inside it.

I tried to pass it down as a argument:

{{#paper-data-table
   sortProp='sort'
   sortDir='asc'
   as |table|
}}
   {{#table.body as |body|}}
      {{#each questions as |question index|}}
          {{question-row
              row=body.row
          }}
      {{/each}}
  {{/table.body}}
{{/paper-data-table}}

But when trying to use the helper(/component) in the template of the question-row component

{{#row as |row|}}{{/row}}

I get the following error: 

Assertion Failed: A component or helper named "row" could not be found Error

So I wanted to ask if thats possible and how that would work.

Upvotes: 0

Views: 146

Answers (1)

n1ru4l
n1ru4l

Reputation: 498

This method is called contextual components and I was able to solve it with the following code in my question-row component:

{{#component row as |row|}}
    {{#row.cell}}
       HALLO
    {{/row.cell}}
{{/component}}

Upvotes: 0

Related Questions