帮手在手柄上打印HTML标签

我有这个试图dynamic创build这个表的句柄代码

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