在Jade模板中使用ucfirst的更好方法是什么？

Question

有没有更好的方法来大写Jade中字符串的第一个字符而不是这个？

for list in project.lists
    - list.name = list.name.charAt(0).toUpperCase() + list.name.slice(1);
    li #{list.name}

每次我想要变量大写时这样做都很难看，在Jade中有什么方法可以定义我在每个模板中都可用的自定义函数：

for list in project.lists
    li #{ucfirst(list.name)}

提前致谢！

Answer 1

#{}的内容作为标准JS执行，因此您可以传入辅助函数以用于此类事务。您尚未指定，但假设您正在使用Jade和Express，您可以执行以下操作：

app.locals.ucfirst = function(value){
    return value.charAt(0).toUpperCase() + value.slice(1);
};

这将在Jade模板中公开一个名为ucfirst的函数。您也可以在每次渲染时将其作为locals的一部分传递，但如果您使用Express，则会自动执行此操作。

Answer 2

如果您愿意使用CSS，则可以创建一个类，该类可以使目标元素中每个单词的第一个字母大写。

CSS

.caps {
    text-transform: capitalize;
}

玉

div.caps
    each foo in ['one', 'two', 'three']
        span #{foo}

结果HTML

<div class="caps"><span>one</span><span>two</span><span>three</span>

结果视图

One Two Three

Answer 3

如果您正在使用吞咽的哈巴狗，这可能会有所帮助：

mixin ucfirst(text)
    - text = text.charAt(0).toUpperCase() + text.slice(1);
    .
      #{text}

只需将其称为任何其他mixin：

li
    +ucfirst(list.name)