6

I need to have an attribute which can have value of zero (0)

Riot template:

<my-tag time="{ time }">

this.time = condition ? '10' : '0'

</my-tag>

Desired result:

<my-tag time="0"></my-tag>

However, Riot automatically omits whole attribute if it has falsy value:

<my-tag></my-tag>

My current workaround:

this.on('updated', () => {
  $(this.root).attr('time', this.time)
})

In other words, i need time attribute to have exact value of time property.

Edit:

Looks like this has changed since 2.2.4.

Demo with Riot 2.2.4

this works as expected - both tags have rendered attribute time with according value

Demo with Riot 2.3.13

this fails - tag with attribute set to false has whole attribute removed

Jozef Mikuláš
  • 61
  • 3
  • I'm not sure you can put expressions on a custom tag in its definition. Can't you put the expression on some inner node? Also, only boolean attributes (e.g. checked, selected) are removed if the their value is falsy (http://riotjs.com/guide/#expressions). – Antoine Jan 14 '16 at 15:04
  • @Antoine: yes, you can put expressions in custom tag itself. it works as excepted. putting it on some inner node has same effect. – Jozef Mikuláš Jan 15 '16 at 08:24
  • that's weird, I cannot reproduce the issue on children nodes (using v2.2.4, not the latest). I'm not using the compiler (similar to gihrig's workflow), so I cannot test on tag itself. – Antoine Jan 15 '16 at 09:18
  • @Antoine: edited my questions - looks like this works in 2.2.4 – Jozef Mikuláš Jan 15 '16 at 10:21

2 Answers2

1

This is working in riot v2.3.18:

<my-tag time="{ time ? '10' : '0'}">
    <script>
    this.time = false;
    </script>
</my-tag>

will generate 

<my-tag time="0"></my-tag>
peckles
  • 66
  • 2
  • 7
0

Try prefixing your attribute with "riot-"

<my-tag riot-time="{ time }">

I had a similar problem

<div class="fldr" data-stat="{ s }">

When s = 0, renders as

<div class="fldr">

This worked in my case

<div class="fldr" riot-data-stat="{ s }">

Note that I am not using the riot compiler, I write the Javascript the compiler would produce, you may have to bypass the Riot compiler for this to work. Just look at your compiled my-tag.js and go from there.

Riot API docs on riot.tag() http://riotjs.com/api/#manual-construction

gihrig
  • 51
  • 1
  • 10