Question

我创建了帮助器来生成“li”代码，如下所示：

Handlebars.registerHelper("REQUEST_LI", function(id){
                                    var LI = "";
                $.each(APP.que_random_ids, function(i, v){
                        if( v.subject == id ){
                            LI = LI + "<li><input type='button' value='"+v.index+"'/></li>";    
                        }
                });

                return LI;
    });

正确生成输出。但是在模板中它显示了“li”标签。

</li><li><input type='button' value='74'/></li><li><input type='button' value='75'/></li><li><input type='button' value='76'/></li><li><input type='button' value='77'/></li><li><input type='button' value='78'/></li><li><input type='button' value='79'/></li><li><input type='button' value='80'/></li><li><input type='button' value='81'/></li><li><input type='button' value='82'/></li><li><input type='button' value='83'/></li><li><input type='button' value='84'/></li><li><input type='button' value='85'/></li><li><input type='button' value='86'/></li><li><input type='button' value='87'/></li><li><input type='button' value='88'/></li><li><input type='button' value='89'/></li>

我点击按钮调用帮助器。如果您有任何想法，请分享。

Answer 1

Handlebars默认情况下对{{...}}中的内容进行HTML编码。所以如果你说：

{{REQUEST_LI x}}

然后你的帮助者会将所需的HTML作为字符串生成，然后Handlebars将对其进行HTML编码（即<变为<，...）。

有两种解决方法：

帮助者可以返回Handlebars.SafeString：return new Handlebars.SafeString(LI)而不是return LI。
您可以将其留待模板，并使用{{{...}}}跳过编码步骤：{{{REQUEST_LI x}}}而不是{{REQUEST_LI x}}。

我可能选择 1 。

快速演示三重缓存和SafeStrings如何工作：http://jsfiddle.net/ambiguous/ZN2ej/

Answer 2

他的解释完全正确。跳过此编码的另一种方法是'＃'。试试这个 -

{{#REQUEST_LI x}}{{/REQUEST_LI}}

[这就是默认帮助程序，如if，每个都被写入。]

关于帮助者的Handlebars.js问题

2 个答案: