how to know if the row is the last row ?

[olivierauverlot]

Sorry if my question if off topic. I try to made a new component that displays a list of row and I want to customize the last row content.

select 'foo' as component;
select 'row1' as data;
select 'row2' as data;

How to do that with handlebars.js ? In a template, I don't understand how to detect the last row of data.

Thanks for your help :)

[lovasoa]

SQLPage works in a streaming fashion. Neither sqlpage nor even the database itself know whether a row will be the last one while processing it.

However, sqlpage templates let you buffer some information and render it later, when the component is closing and we know no more rows will appear.

You can use the {{#delay}} and flush_delayed helpers to help you with this buffering.

What are you trying to do exactly ?

[olivierauverlot]

Thanks for your reply. I try to implement a breadcrumb component and for this, I need to indicate that the last item is active (it's the current page).

For example :
Home > Data > Users

In the each_row loop, I want detect the last item to set the active class on it.

[olivierauverlot]

Component code :

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
  {{#each_row}}
    <li class="breadcrumb-item{{#if active}} active{{/if}}" {{#if active}}aria-current="page"{{/if}}>
		<a href="{{#if link}}{{link}}{{else}}?link={{title}}{{/if}}"{{#if description}} title="{{description}}"{{/if}}>{{title}}</a>
	</li>
  {{/each_row}}
  </ol>
</nav>

Example :

select
	'breadcrumb' as component;
select
	'Home' as title,
	'/' as link;
select 
	'Articles' as title,
	'articles.sql' as link,
	'Stay informed with the latest news' as description;
select
	'Information Technology (IT)' as title,
	'it.sql' as link,
	TRUE as active;

As you see, for the moment, I must set manually the active page. I think that it could be better if last item is selected by the component.

[lovasoa]

Your current solution seems like the best choice to me. It gives the option to the user of the component to set whatever they want as active.

If not doing that, then I would do it in css, replicating the effect of active. But I think that would be overkill for this usecase.

side note: you can use ~ to remove blank space around handlebars markup, to make your code more readable;

https://handlebarsjs.com/guide/expressions.html#whitespace-control

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
  {{#each_row}}
    <li class="breadcrumb-item{{#if active}} active{{/if}}" {{#if active}}aria-current="page"{{/if}}>
		<a href="
                    {{~#if link~}}
                            {{link}}
                     {{~else~}}
                          ?link={{title}}
                    {{~/if~}}"
                   {{~#if description}} title="{{description}}"{{/if~}}
               >{{title}}</a>
	</li>
  {{/each_row}}
  </ol>
</nav>