javascript - JS/Coffee + HTML，设置条件类的更简单方法

Question

所以，当我从 javascript(或 CoffeeScript ，我根据具体情况使用两者)渲染 html 模板时，我发现我有一个非常常见的情况，看起来不必要的笨拙。例如:

我有一个像这样的 JS 对象:

var thingy = {
  name: 'Some Thing',
  category: 'widget',
  active: true
};

我可能想将其渲染为 html，如下所示:

<div class="widget active">Some Thing</div>

总是感觉笨重的一点是将 javascript 中的 bool 检查转换为 css 类字符串。我通常最终会做的是这样的:

function renderThing(thing) {
  var klass = thing.active ? thing.category + " active" : thing.category
  return '<div class="'+klass+'">'+thing.name+'</div>';
}

在coffeescript中，这感觉更长，因为三元更冗长:

renderThing = (thing) ->
  klass = if thing.active then thing.category + " active" else thing.category
  '<div class="'+klass+'">'+thing.name+'</div>'

当只有一个这样的属性时，这并不算太糟糕，但如果您最终遇到具有三个或四个这样的属性的情况，代码很快就会变得非常冗长。

所以，我想知道，是否有人对更简洁和/或可读的方法有想法/建议？

Answer 1

如果我做了很多这样的事情，那么我会编写一个简单的函数来或多或少地提供我自己的“将 bool 值转换为字符串”:

if_true = (f, s) ->
    return s if(f)
    return ''

然后进行一些字符串插值来构建类字符串:

klass = "#{if_true(o.active, 'active')} #{o.category}"

如果您不喜欢 !o.active 时的杂散空间，那么您可以将该空间移至 if_true 参数中:

klass = "#{if_true(o.active, 'active ')}#{o.category}"

如果您有一大堆标志，请将它们的名称放入一个数组中，并使用循环理解来构建一个类名数组:

o =
    first: true
    second: true
    third: false
    fourth: undefined
    fifth: 'element'
    category: 'pancakes'

flags = [ 'first', 'second', 'third', 'fourth', 'fifth' ]

klasses = (if_true(o[f], f) for f in flags)
klasses.push(o.category)
klass = klasses.join(' ')

演示:http://jsfiddle.net/ambiguous/eGDaa/