RiotJS use property as class name

Question

Let's consider following template:

<ul class="clearfix">
  <li each={ timeslot, i in events } 
    class={ ??? } 
    data={ timeslot }
    style="width: { timeslot.len*100 }px;">    
       <div>{ timeslot.start.format() }</div>
       <div>{ timeslot.title }</div>
  </li>
</ul>

I have a state property in my timeslot object, that has the exact same set of values I would like to use as class names. Thus it would be straightforward to use class={ timeslot.state }. But class is evaluated differently. Is there any way to avoid expressions in this case and use the property as it is as class name?

Thank you.

Answer 1

When you use a {} expression, it can be evaluated in a number of ways. If you are setting as an object, IE: class={foo: true, bar: false } it is treated like a list of class names to add based on whether the value of each key is true-ish.

BUT... if you do class="{ timeslot.classname }" - it will instead be treated like a string and the output will be the class="whatever" you are looking for... as long as timeslot.classname is a string.

Answer 2

In > 3.4.0 you can create an object, which will then do what you want: timeslot.state={SomeClass:true}

See http://riotjs.com/guide/#expressions and scroll to Class object expressions