车把自定义助手卡在 "doesn't match each"

Question

我想通过使用 handlebars 将某些元素设为小写（我知道 CSS 可以做到这一点，但是你不能为类名这样做）。无论如何，我收到此错误：

Uncaught Error: toLowerCase doesn't match each

我的代码：

    <script id="icon-template" type="text/x-handlebars-template">
        {{#each results}}
        <li>
            <div class="content">
                    <i class="Icon icon-{{#toLowerCase contentType}}"></i>
            </div>
       </li>
       {{/each}}
    </script>

自定义助手：

<script type="text/javascript">
Handlebars.registerHelper("toLowerCase", function(input) {
    var output = input.toLowerCase();
    return output.replace(" ", "");
});
</script>

我做错了什么？

Answer 1

我明白了。对于有同样问题的人：

<script type="text/javascript">
handlebars.registerHelper("toLowerCase", function(input) {
    var output = input.toLowerCase();
    return output.replace(" ", "");
});
</script>

Handlebars 首先必须有一个小写字母（例如：handlebars），并且当您使用自定义助手时不需要主题标签。所以自定义助手现在是 toLowerCase 而不是 #toLowerCase

<script id="icon-template" type="text/x-handlebars-template">
    {{#each results}}
    <li>
        <div class="content">
                <i class="Icon icon-{{toLowerCase contentType}}"></i>
        </div>
   </li>
   {{/each}}
</script>

Answer 2

如果车把助手名称全部小写：

<script type="text/javascript">
handlebars.registerHelper("lower", function(input) {
    var output = input.toLowerCase();
    return output.replace(" ", "");
});
</script>

调用时需要使用哈希：

<script id="icon-template" type="text/x-handlebars-template">
   <i class="Icon icon-{{#lower contentType}}"></i>
</script>

如果助手使用 CamelCase 名称：

<script type="text/javascript">
handlebars.registerHelper("toLowerCase", function(input) {
    var output = input.toLowerCase();
    return output.replace(" ", "");
});
</script>

那么你不使用散列:

<script id="icon-template" type="text/x-handlebars-template">
   <i class="Icon icon-{{toLowerCase contentType}}"></i>
</script>

Answer 3

调用助手的方式很重要。如果您使用散列 (#)，则它被视为 Block Helper 并且需要关闭。否则你会得到那个解析错误。

{{#toLowerCase}}Some UPPERCASE text{{/toLowerCase}}

显然，辅助代码的作用也很重要。上面的语法是正确的，但代码可能达不到预期的效果。

车把自定义助手卡在 "doesn't match each"

Handlebar custom helper stuck on "doesn't match each"

javascript

handlebars.js