Riot: Proper use of <template>

[anonimusprogramus]

Help us to manage our issues by answering the following:

1. Describe your issue:

Hi @GianlucaGuarini

Not an issue though, but question.

I got used to with <virtual> before, and now exploring <template>. Question: am I using it properly?

This is what mostly I'm currently using it:

(1) For loops. It's clearer and easier to read.

<template each="{ item in items }">
  <div class="box">
    <p>{ item.text }</p>
    <p>{ item.number }</p>
  </div>
</template>

rather than

<div class="box" each="{ item in items }">
  <p>{ item.text }</p>
  <p>{ item.number }</p>
</div>

(2) For async request. With if directive, this works well so far.

<world-map>
  <template if="{ state.map }">
    <template is="vector-map" { ...state.map }></template>
  </template>

  <script>
    export default {
      async onBeforeMount(props, state) {
        const res = await this.getData('/someapi')

        if (res.data.status === 'ok') {
          this.state.map = {
            id: 'world-map',
            data: res.data.result.data
          }
        }
      }
    }
  </script>
</world-map>

(3) For preserving css. With is attribute, as in example above.

Some styles (like ones built with Bootstrap) will break if custom element/components used _in-between_ already styled elements. <template is="..."> comes to rescue perfectly, reminds me of old but gold <virtual> . (Ref: #2692)

That's all.

I wonder if these approaches have any effects/disadvantages internally etc. Please advise. Thank you.

1. Can you reproduce the issue?

_Written above_

1. On which browser/OS does the issue appear?

_Chrome/Linux_

1. Which version of Riot does it affect?

_4.3.1_

1. How would you tag this issue?

   • [x] Question
   • [ ] Bug
   • [ ] Discussion
   • [ ] Feature request
   • [ ] Tip
   • [ ] Enhancement
   • [ ] Performance

[hudelgado]

Hi, i will tell you what i think.

From the way i see it the <template> tag or html fragments should be used when it's needed to have any peace of html without a wrapper tag.

In (1) you have a wrapper div for each

<p>{ item.text }</p>
<p>{ item.number }</p>

html fragment, i personally find the second example you gave more readable, but i think that internally they will be treated in the same way, and you can use the one you find more suitable.
As an advise you can try to use an identifier in the each loop in order to improve the performance, you can read about it in the docs.

<div class="box" each="{ item in items }" key={ item.number }>

In (2) i think you can make it more simpler if you use it like

<vector-map if="{ state.map }" { ...state.map }></vector-map>

I find the is attribute useful when you want to dynamically render different tags to the same DOM node.

In the rest of the code i also find easy to reason if you do something like:

    export default {
      onBeforeMount(props, state) {
        this.getData('/someapi').then(updateStateFromRequest)
      },
      updateStateFromRequest (res) {
        if (res.data.status === 'ok') {
          this.state.map = {
            id: 'world-map',
            data: res.data.result.data
          }
        }
      }
    }

In (3) i'm not sure of the issue you mentioned but sometimes there might be problems when integrating with different libraries or frameworks but if the way you're using is working with any particular library i'd say to stick with it.

I hope it might help you.
Cheers

[anonimusprogramus]

Oh cool @hudelgado, I got things to learn from your thoughts. Thanks for sharing!

[GianlucaGuarini]

@hudelgado thank you for your answer you got straight to the point! @anonimusprogramus please close the issue if the answer fulfilled your doubts.