Riot: The virtual tag is rendered when use with if expr

Created on 22 Nov 2016 · 3Comments · Source: riot/riot

Help us to manage our issues by answering the following:

Describe your issue:

The virtual tag is not virtual.

<my-tag>
  <virtual if={ true }>
    <p>Riot.js is Awesome!</p>
  </virtual>
</my-tag>

Can you reproduce the issue?

Yes, see example:
http://jsfiddle.net/wf7bkvur/129/

You can see the rendered virtual tag by using the browser's inspector.

Which version of Riot does it affect?

v3.0.0

How would you tag this issue?

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

Thanks, Great lib! ❤️ cheers 🍺

discussion enhancement fixed

Source

syuilo

Most helpful comment

I have this same issue. I would like to be able to turn on/off a group of elements based on a flag. I tried using virtual with an if, and it leaves the virtual tag in place... In this case, the virtual element messes up the css due to included li's not being children of ul.features.

<ul class="features">
    <li>Stuff that's always here</li>
    <li>More stuff</li>
    <virtual if={extrastuff.length != 0}
        <li class="auto_result_header">Additional results</li>
        <li class="auto_result_item" each={result, num in extrastuff}>{result.text}</li>
    </virtual>
</ul>

I worked around it with multiple if's for now, but it's a bit ugly and won't work in other cases.

jayk on 28 Nov 2016

👍3

All 3 comments

virtual is only supported for tags, so with the data-is, I will update the docs and work on a solution for non-tags, here is a work around

rsbondi on 23 Nov 2016

👍1

<ul class="features">
    <li>Stuff that's always here</li>
    <li>More stuff</li>
    <virtual if={extrastuff.length != 0}
        <li class="auto_result_header">Additional results</li>
        <li class="auto_result_item" each={result, num in extrastuff}>{result.text}</li>
    </virtual>
</ul>

I worked around it with multiple if's for now, but it's a bit ugly and won't work in other cases.

jayk on 28 Nov 2016

👍3

@rsbondi This is occurring in a named tag "confirm" (see src below) although it is a child tag of a data-is up the tree.

Often I can just use a

for the {if}'s I'm inserting to mitigate but the CSS framework (Semantic UI) targets direct children of .ui.modal, so this breaks:

<confirm class="ui modal"> <virtual if="{ settings }"> <div class="header">{ settings.titleText }</div> <div class="content">{ settings.bodyText }</div> </virtual> </confirm>