How to access a component specific value from a nested component

@Hummingbird wrote:

I was running into issues with the block params while trying to create a customisable table view.

So, first the things I was able to achieve. I created a custom-table component, which allows to provide a custom template for the row by calling like this. For the sake of simplicity, data is a parameter of the controller

application/template.hbs:

{{#custom-table model=data}}

  {{#table-row model=data as |row|}}
    <!-- custom table row template -->
    <span>custom row:</span><span>{{row}}</span>
  {{/table-row}}

{{/custom-table}}

I created a table-row component, which has a template that makes use of a block param and iterates through the model:

table-row/component.hbs:

{{#each model as |row|}}
  <div>{{yield row}}</div>
{{/each}}

This works pretty well so far. However, the custom-table component keeps all the logic for the table, like filtering data. Now I would like to enable the user to specify a custom header. However the header would for instance need to have access to the filter value from the table component. So, the custom-table component should be called like that:

{{#custom-table model=data}}

  {{#table-header}}
    <!-- custom header template -->
    <div>
      <!-- access filter value from custom-table -->
      {{input value=filter}}
    </div>
  {{/table-header}}

  {{#table-row model=data as |row|}}
    <!-- custom table row template -->
    <span>custom row: </span><span>{{row}}</span>
  {{/table-row}}

{{/custom-table}}

Apparently the filter is assumed to be found within the scope of the application template and not the custom-table component. Same issue if I would like to use the filteredData property of the custom-table component to render the rows. Is there a way to access the parameters of the custom-table component, when providing an option to use a customisable template?

Here is a twiddle showing my issues: https://ember-twiddle.com/2589e8d0f783a6ddc15c

Posts: 4

Participants: 2

Read full topic