RiotJS 使用属性作为 class 名称

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>

我的 timeslot 对象中有一个 state 属性，它具有我想用作 class 名称的完全相同的一组值。因此使用 class={ timeslot.state } 会很简单。但是 class 的计算方式不同。在这种情况下，有什么方法可以避免表达式并按原样使用属性作为 class 名称？

谢谢。

Answer 1

在 > 3.4.0 中，您可以创建一个对象，然后它将执行您想要的操作： timeslot.state={SomeClass:true}

查看 http://riotjs.com/guide/#expressions 并滚动至 Class object expressions

Answer 2

当您使用 {} 表达式时，可以通过多种方式对其求值。如果您设置为对象，IE：class={foo: true, bar: false } 它被视为 class 名称列表，根据每个键的值是否为真来添加。

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

RiotJS 使用属性作为 class 名称

RiotJS use property as class name

riot.js

RiotJS 使用 属性 作为 class 名称

RiotJS use property as class name

riot.js

RiotJS 使用属性作为 class 名称