车把中的助手打印HTML标签

Question

我有这样一段代码，用来动态创建这个表。

<tr>
    {{#each this}}
        {{#ifCond this }}
        {{/ifCond}}
    {{/each}}
</tr>

现在我有了一个像这样定义的扶手(在res.render中发送这个助手，如下所示)

'ifCond': function( state ) {
    if(state == "success") 
        return Spacebars.SafeString('<td class="tile-green">' + state + '</td>');
    else if( state == "failure")
        return Spacebars.SafeString('<td class="tile-red">' + state + '</td>');
    else if (state == "unknown"
        return Spacebars.SafeString('<td class="tile-orange">' + state + '</td>');

    else 
        return Spacebars.SafeString('<td>' + state + '</td>');
}

似乎不起作用。有人能帮我吗？

Answer 1

下面是一个如何做到这一点的示例：https://jsfiddle.net/ChristopheThiry/L34f7rm2/

模板：

{{#each lines}}
<tr>
    {{#each columns as |column|}}
        {{#ifCond column}}
      {{/ifCond}}
    {{/each}}
</tr>
{{/each}}

帮手：

  Handlebars.registerHelper('ifCond', function( column ) {
    if(column.state == "success") {
        return '<td class="tile-green">' + column.state + '</td>';
    } else if( column.state == "failure") {
       return '<td class="tile-red">' + column.state + '</td>';
    } else if (column.state == "unknown") {
        return '<td class="tile-orange">' + column.state + '</td>';
    } else {
        return '<td>' + column.state + '</td>';
    }
    });

数据：

{ "lines" : [
   { "columns" : [ { "state" : "STEP1" }, { "state" : "STEP2" }, { "state" : "STEP3" } ] },
   { "columns" : [ { "state" : "success" }, { "state" : "failure" }, { "state" : "unknown" } ] },
   { "columns" : [ { "state" : "success" }, { "state" : "success" }, { "state" : "unknown" } ] } 
           ] }