Question

让我们考虑以下模板：

<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>

我的state对象中有一个timeslot属性，它具有我想用作类名的完全相同的值集。因此，使用class={ timeslot.state }会很简单。但 class 的评估方式不同。有没有办法在这种情况下避免表达式并使用属性作为类名？

谢谢。

Answer 1

在＆gt; 3.4.0你可以创建一个对象，然后做你想做的事情： timeslot.state={SomeClass:true}

请参阅http://riotjs.com/guide/#expressions并滚动至Class object expressions

Answer 2

使用{}表达式时，可以通过多种方式对其进行评估。如果您要设置为对象，IE：class={foo: true, bar: false }它将被视为要添加的类名列表，具体取决于每个键的值是否为true-ish。

但是......如果你class="{ timeslot.classname }" - 它将被视为一个字符串，输出将是你正在寻找的class="whatever" ...只要timeslot.classname是一个字符串。

RiotJS使用属性作为类名

2 个答案: