车把打印 HTML 标签中的助手

Question

我有试图动态创建此车把的代码 table

<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" } ] } 
           ] }

车把打印 HTML 标签中的助手

Helper in handlebars printing HTML tags

node.js

html-table

handlebars.js

helper