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

因此，当我从javascript（或coffeescript，我根据具体情况使用这两种脚本）呈现html模板时，我发现有一个非常常见的情况，看起来不必要的笨拙。例如：

我有一个JS对象，如下所示：

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

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

我可能希望将其呈现为html，如下所示：

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

一些东西

总是让人觉得笨拙的一点是将javascript中的布尔签入转换为css类字符串。我通常会这样做：

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

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

函数渲染（东西）{
var klass=thing.active？thing.category+“active”：thing.category
返回“”+对象。名称+“”；
}

在coffeescript中，这感觉更长，因为三元组更详细：

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

renderThing=（事物）->
klass=如果thing.active那么thing.category+“active”else thing.category
''+东西，名字+''

当只有一个这样的属性时，这并不可怕，但是如果您最终遇到三个或四个这样的属性，代码很快就会变得非常冗长

---

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

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

然后进行一点字符串插值以构建类字符串：

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

如果您不喜欢

时的杂散空间！o、 活动

则可以将该空格移动到

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(' ')

---

演示：

如果我做了很多这样的工作，那么我会编写一个简单的函数，或多或少地提供我自己的“将布尔值转换为字符串”：

然后进行一点字符串插值以构建类字符串：

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

如果您不喜欢

时的杂散空间！o、 活动

则可以将该空格移动到

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(' ')

演示：

当只有一个这样的财产时，这并不可怕，但是如果你 最终会出现三四个这样的情况，代码很快就会变得非常复杂 冗长的

确实会的。看起来是使用assign from switch的理想场所——也就是说，如果只有一个“add-on”类：

score=76
坡度=开关
当分数<60时，则为“F”
当分数<70时，则为“D”
当分数<80时，则为“C”
当分数<90时，则为“B”
其他“A”

但这将是1个输入等于1个输出，这可能不是您想要的。也许你需要：

renderThing = (thing) ->
  cssClass = thing.category
  keysToCss = ["active", "disabled", "delta", "gamma", "epsilon"]

  for k,v of thing 
   if lodash.contains(keysToCss, k) # I'm using lodash here, same as Underscore
     cssClass += " #{k}" 

  "<div class='#{cssClass}'></div>"

renderThing=（事物）->
cssClass=thing.category
keystcss=[“活动”、“禁用”、“增量”、“伽马”、“ε”]
对于k，v的东西
如果lodash.contains（keystcss，k）#我在这里使用的是lodash，与下划线相同
cssClass+=“{k}”
""

此外，我认为，一旦您开始像这样混合标记和代码，您就需要开始研究Angular这样的工具

当只有一个这样的财产时，这并不可怕，但是如果你 最终会出现三四个这样的情况，代码很快就会变得非常复杂 冗长的

确实会的。看起来是使用assign from switch的理想场所——也就是说，如果只有一个“add-on”类：

score=76
坡度=开关
当分数<60时，则为“F”
当分数<70时，则为“D”
当分数<80时，则为“C”
当分数<90时，则为“B”
其他“A”

但这将是1个输入等于1个输出，这可能不是您想要的。也许你需要：

renderThing = (thing) ->
  cssClass = thing.category
  keysToCss = ["active", "disabled", "delta", "gamma", "epsilon"]

  for k,v of thing 
   if lodash.contains(keysToCss, k) # I'm using lodash here, same as Underscore
     cssClass += " #{k}" 

  "<div class='#{cssClass}'></div>"

renderThing=（事物）->
cssClass=thing.category
keystcss=[“活动”、“禁用”、“增量”、“伽马”、“ε”]
对于k，v的东西
如果lodash.contains（keystcss，k）#我在这里使用的是lodash，与下划线相同
cssClass+=“{k}”
""

此外，我认为，一旦开始混合标记和这样的代码，您就需要开始研究Angular之类的工具。

检查coffeescripts以迭代一组标志，并构建一个列表，您可以将其连接到类值：

renderThing = (thing) ->
  flags = ["selected", "current", "active", "disabled", "bookmarked"];
  klasses = (f for f in flags when thing[f])
  klasses.push thing.category
  "<div class=\"#{klasses.join(" ")}\">#{thing.name}</div>"

renderThing=（事物）->
标志=[“选定”、“当前”、“活动”、“禁用”、“书签”]；
Klasse=（f表示事物[f]时的标志中的f）
克拉斯，推东西，分类
“{thing.name}”

检查coffeescripts以迭代一组标志，并构建一个列表，您可以将其连接到类值：

renderThing = (thing) ->
  flags = ["selected", "current", "active", "disabled", "bookmarked"];
  klasses = (f for f in flags when thing[f])
  klasses.push thing.category
  "<div class=\"#{klasses.join(" ")}\">#{thing.name}</div>"

renderThing=（事物）->
标志=[“选定”、“当前”、“活动”、“禁用”、“书签”]；
Klasse=（f表示事物[f]时的标志中的f）
克拉斯，推东西，分类
“{thing.name}”

klass=thing.category；如果（thing.active）klass+=“active”

？您能否更具体地描述一下“四分之三的情况”，也许是一个示例代码？你是说四个三元运算符吗？循环是可能的吗？@Bergi是的，我的意思是使用多个三元运算符，例如，如果一个对象可以有多种类型的状态，如

选中的

或

当前的

或

活动的

或

禁用的

或

书签的

等。我尽量不给出一个过于具体的示例，因为我更多地将其视为javascript中经常遇到的一般问题编程。

klass=thing.category；如果（thing.active）klass+=“active”

？您能否更具体地描述一下“四分之三的情况”，也许是一个示例代码？你是说四个三元运算符吗？循环是可能的吗？@Bergi是的，我的意思是使用多个三元运算符，例如，如果一个对象可以有多种类型的状态，如

选中的

或

当前的

或

活动的

或

禁用的

或

书签的

等。我尽量不给出一个过于具体的示例，因为我更多地将其视为javascript中经常遇到的一般问题实际上，我一般不会将标记和代码混合使用，但几乎总是使用