RiotJS generates empty output

Question

I develop RiotJS wrapper for Bootstrap 4. You can check a live example on Plunker. There is a custom tag

<item>
    <a class="dropdown-item" href="#">
        <yield/>
    </a>
</item>

I use it in the following way: <item>Action</item>. getting the following output:

<item>
    <a class="dropdown-item" href="#"> </a>
    <a class="dropdown-item" href="#"> </a>
    <a class="dropdown-item" href="#"> Action </a>
</item>

Does anyone know why the first 2 empty links are generated and how to avoid them?

Can you please post a live example? I guess your html template here is not complete and you miss other stuff. You can use our [riot bugs template](http://riotjs.com/examples/plunker/?app=bug-reporter) — Gianluca Guarini, Apr 23 '16 at 10:46
@GianlucaGuarini Hi, thank you for the interest. You can check a plunker on https://plnkr.co/edit/WzGvRRoU2FR1Tt058jPw — Alexander Elgin, Apr 23 '16 at 17:26
try this https://plnkr.co/edit/2E2oiXFOCrg4n2P2lzKF?p=preview — Gianluca Guarini, Apr 24 '16 at 19:33

score 0 · Accepted Answer · answered Apr 23 '16 at 20:40

It has do to with the mounting of your tags, along with <yield />. Not sure of the exact issue here, but a solution to your problem is by mounting your outmost tag only, don't mount every single child tag explicitly.

So, in index.html in your example code, replace:

<script> riot.mount('caret'); riot.mount('divider'); riot.mount('heading'); riot.mount('item'); riot.mount('content'); riot.mount('toggle'); riot.mount('dropdown'); </script>

... with:

<script> riot.mount('dropdown'); </script>

RiotJS generates empty output

1 Answers1