Conditional processing in component template

Questions
1

I’m using a a component template (I think that’s what it’s called) and have the following in my template, which iterates over an array of items.

<div class="match-section">
${matches.map((match, index) => $h`
  <div key=${index} class="chip match score-${match.score}">
    <a class="chip-label" href="/item/?id=${match.id}&title=${match.title}">${match.title}</a>
  </div>
  <!--if match.lastOfScore, insert <hr> here-->
`)}
 </div>

As you can see from the inline comment, I’d like to insert an <hr> element conditionally based on an lastOfScore attribute of the items I’m iterating in the .map

Is there a way to do this?

Second question…is there any documentation that explains the template syntax here? I’m not sure if this is Template7 or some other template language. I’ve looked at the documentation here: Router Component | Framework7 Documentation, but I’m not sure if that’s the full reference for the template syntax.

2

here => sweet-nash-r4xf1r - CodeSandbox

Template7 has been removed from v6
you actually use “Template literals”
docs => Template literals (Template strings) - JavaScript | MDN

1 Like
3

@deejay you’re a hero. Thank you.

Would you say that using .f7 templates and template literals are a solid approach for the future? Reason I’m asking is that I’m thinking about migrating to a vue-based Framework7 app, but I don’t want to go through the effort unless vue-based (or react-based) is absolutely a better long-term direction.

4

that’s not an easy question.
and i don’t want to freaks everybody out, so i’ll just make a guess.

my guess:
vue,react,etc will eventually die (replaced for something better),
while vanilla(ES[n]) will last forever.

1 Like
5

btw, if your question was about performance, then no guesses required:
vanilla wins before the others even starts.

1 Like