Help with 'unless' functionality

#1

Hi, I’m having trouble with getting #unless to work. My goal is to have a section where a message displays if there are no gigs added, but it doesn’t seem to be working. Code screenshot below.

As far as I can tell this exactly matches the documentation, but the browser is rendering both sections at once.

Any help would be great. I’m running Vapid 0.8.1. Thanks!

#2

Hi there :wave:t3:, welcome to the Vapid Forum :slight_smile:

Ok so here’s the deal, the unless tag will render something until the variable (here gigs) is true. So, I would try to combine if and unless like :

{{#section gigs}}
  {{if gigs}}
    <div class="row align-items-center">
      <div class="col">
        <h3>{{gig_date type=date}}</h3>
      </div>
    </div>
    <hr>
  {{/if}}{{#unless gigs}}
    <p>No gigs currently scheduled.</p>
  {{/unless}}
{{/section}}
#3

Thanks so much for the quick response! Unfortunately when I tried the solution you provided above (also added in the ‘#’ before if and unless) it didn’t work as expected- now it only displays the #unless message, no matter the status of whether gig_date has any entries or not, so for some reason that is not rendering as true. Also, when I have two gig_date entries, I get the #unless block rendered twice.

Does this mean the documentation is incorrect? Because there is a different syntax listed there for #unless blocks:

(No need for #if statement, putting the #unless outside the closing section tag.)
Any other ideas?

#4

I don’t think vapid holds a way to write a conditional on the number of records added. I agree that a {{gigs_count}} variable could be handy, and would likely solve your case.

Meanwhile, as a small hack, you could use CSS to show/hide the sections, with smth like:

<div class="gigs-container">
    {{#section gigs}}
      <div class="row align-items-center">
        <div class="col">
          <h3>{{gig_date type=date}}</h3>
        </div>
      </div>
      <hr>
    {{/section}}
    <div class="no-gigs">
      <p>No gigs currently scheduled.</p>
    </div>
</div>

and this css:

.no-gigs{
display: none;
}
.no-gigs:first-child{
    display: inline-block
}

(untested code)

#5

Thank you for the help- but it looks like this is more an issue of functionality not working as expected at this point so I submitted a bug in Github.