条件 class for html 使用纯车把

Question

我正在使用 handlebars 在服务器端呈现代码（否 angular/ember）

我还能有类似的东西吗：
<p dir="auto" {{#if isRTL: class=align-right}}>{{{content}}}</p>

我想要 CSS class 仅当布尔值为真时类似于 ember 的绑定属性...

没有它，代码就是一团糟：

{{#if isRTL}}
    <p dir="auto" class="align-right>{{{content}}}</p>
{{else}}
    <p dir="auto">{{{content}}}</p>
{{#if}}

Answer 1

没有必要环绕整个 HTML 元素。您可以用 if 子句包装 class。

<p dir="auto" {{#if isRTL}}class="align-right"{{/if}}>{{{content}}}</p>

仅当 isRTL 为真时，才会呈现 class="align-right" 属性。

此外，由于 Handlebars 是 Mustache 的扩展，您可以使用：

<p dir="auto" {{#isRTL}}class="align-right"{{/isRTL}}>{{{content}}}</p>

Answer 2

我注册了一个帮手来做这件事，让事情变得更干净，以防万一有更多类要添加。

/**
 * Prints an objects key if the value is true.
 * example: {printed:true, pleaseprint:'hello', notprinted:false, noprint:undefined}
 */
handlebars.registerHelper("printif", function(object){
    // stringToPrint:boolean
    var out = [];
    for (var string in object) {
        var value = object[string];
        if (false===value || null===value || undefined===value) {
            continue;
        }
        out.push(string);
    }
    return out.join(' ');
});

和模板：

<div class="module {{printif moduleVars}}">

变量：

var moduleVars = {"align-right":isRTL}

所以如果 isRTL 为真，它将输出字符串：

<div class="module align-right">

Answer 3

在帮手的帮助下，我变得干净了。但在我的情况下，条件是两个变量真实性。

//js
Handlebars.registerHelper('ternary', function(cond, v1, v2) {
   return cond ? v1 : v2;
});

//html
<p dir="auto" class="some-other-class {{ternary isRTL 'align-right' 'align-left'}}">{{{content}}}</p>

条件 class for html 使用纯车把

conditional class for html using pure handlebars

handlebars.js