Handlebars.js 如果块助手 ==答案

【问题标题】：Handlebars.js if block helper ==Handlebars.js 如果块助手 ==
【发布时间】：2013-02-26 11:40:45
【问题描述】：

您将如何更改以下代码以使其正常工作？问题在于 this == 'some message' 表达式：

<ul>
  {{#each errors}}
    {{#if (this == 'some message') }}
    <li>Status</li>
    {{else}}
    <li>{{this}}</li>
    {{/if}}
  {{/each}}
</ul>

【问题讨论】：

标签： templates handlebars.js

【解决方案1】：

最简单的方法是添加自定义 if_eq 助手：

Handlebars.registerHelper('if_eq', function(a, b, opts) {
    if(a == b) // Or === depending on your needs
        return opts.fn(this);
    else
        return opts.inverse(this);
});

然后调整你的模板：

{{#if_eq this "some message"}}
    ...
{{else}}
    ...
{{/if_eq}}

演示：http://jsfiddle.net/ambiguous/d4adQ/

如果您的errors 条目不是简单的字符串，那么您可以向它们添加“这是一些消息”标志并使用标准的{{#if}}（请注意，将属性直接添加到字符串不会那么好用):

for(var i = 0; i < errors.length; ++i)
    errors[i] = { msg: errors[i], is_status: errors[i] === 'some message' };

和：

{{#if is_status}}
    <li>Status</li>
{{else}}
    <li>{{msg}}</li>
{{/if}}

演示：http://jsfiddle.net/ambiguous/9sFm7/

【讨论】：

如果{{#if_eq this "some message"}} 有效，为什么不this.someProperty？无法让它工作。
@raffian：你有一个你想要做什么的例子（也许是对答案中的一个小提琴的修改）？
.. 正在构建一个小提琴，然后注意到我的自定义助手以 {{/if}} 结尾，而不是 {{/if_eq}}，令人难以置信，在这上面浪费了几个小时，但感谢你打开我的眼睛 :-)跨度>
我是hadlebars的菜鸟，我能知道'opts'参数是干什么用的吗？
@Kunok opts.fn 函数用于“if”分支，opts.inverse 用于else 分支。

【解决方案2】：

老问题，但如果你使用 Elving 的 Swag Handlebars helpers library，你可以使用助手 is 和 isnt。

【讨论】：

这个库很好用！

【解决方案3】：

这也可以通过使用 Handlebars Subexpressions 来实现。

模板 -

    <script id="tmplStatus" type="text/x-handlebars">
        <ul>
            {{#each errors}}
                {{#if (is_status this 'some message')}}
                    <li>Status</li>
                {{else}}
                    <li>{{this}}</li>
                {{/if}}
            {{/each}}
        </ul>
    </script>

Javascript -

var errors = [
        'Where is pancakes house?',
        'some message',
        'One cent stamp'
    ];

    Handlebars.registerHelper('is_status', function(msg, matchMsg, options) 
    {
        if(msg === matchMsg)
            return true;
        else
            return false;
    });

    var tmplStatus = Handlebars.compile($('#tmplStatus').html()),
        domStatus = tmplStatus({ errors: errors });
    $('body').append(domStatus);

工作演示：http://jsfiddle.net/techgeeek/b99qwtpw/

【讨论】：

为了可重用性，将助手命名为 is_equal 或类似的名称会更有意义，没有必要将其直接与状态联系起来。