Handlebarsjs 如何检查字符串是否等于某个值

Question

在Handlebars中，是否可以检查一个字符串是否等于另一个值而不注册帮助器？我似乎在Handlebars参考文档中找不到任何相关的信息。

例如：

{{#if sampleString == "This is a string"}}
...do something
{{/if}}

- colmulhall

Answer 1

看起来你不能“直接”做到这一点

为什么不试试使用助手函数呢？

在你的 JavaScript 代码中注册助手函数：

Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
    return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
});

在模板中使用：

{{#ifEquals sampleString "This is a string"}}
    Your HTML here
{{/ifEquals}}

更多细节在这里：handlebars.js中{{#if}}条件语句中的逻辑运算符

更新：另一种方法：

假设您的数据是：

var data = {
    sampleString: 'This is a string'
};

然后（使用jQuery）：

$.extend(data, {isSampleString: function() {
    return this.sampleString ==  'This is a string';}
});

使用模板：

{{#if isSampleString}}
    Your HTML here
{{/if}}

- Mihail

---

我也在尝试实现相同的功能，但在我的情况下，它会抛出一个错误 缺少帮助程序："ifEquals - Wasif

@Wasif，你解决了这个问题吗？ - user557657

@user557657 我把所有自定义帮助程序放在一个JavaScript文件中，该文件与页面一起加载。您可以在代码的任何位置调用Handlebars.registerHelper，但我发现如果它们在一个地方，更容易跟踪我编写的帮助程序。 - Paul

我试过了。它也可以像（ifEquals，else，/ifEquals）这样使用。谢谢你。 - undefined

Answer 2

之前的答案使用了match，但对我不起作用，在if语句中出现错误（类似于“必须只有一个参数”）。

然而，我在这里找到了解决方案，而无需再编写任何帮助程序：

{{#if (eq person "John")}} hello {{/if}}

- Kerhael

---

我相信要让"eq"正常工作，你需要拥有Ember Truth Helper插件，据这里所述。在我的情况下，我没有那个插件。 - zed

尝试此解决方案的人需要注意，在Shiny Server模板文件中，该解决方案对我无效。例如：https://dev59.com/eY7ea4cB1Zd3GeqPBXIG - Brian D

这会导致出现 message: "缺少辅助函数: "eq"。因此，您需要首先注册此辅助函数。 - bvdb

辅助类是为了导出方法而存在的。 - prasanth pr

Answer 3

我会像这样使用辅助函数：

Handlebars.registerHelper('ifeq', function (a, b, options) {
    if (a == b) { return options.fn(this); }
    return options.inverse(this);
});

Handlebars.registerHelper('ifnoteq', function (a, b, options) {
    if (a != b) { return options.fn(this); }
    return options.inverse(this);
});

然后在您的代码中：

{{#ifeq variable "string"}} 
    ... do this ... 
{{/ifeq}}
{{#ifnoteq variable "string"}} 
    ... do this ... 
{{/ifnoteq}}

- Pablo Varando

Answer 4

使用handlebars-helpers，该工具提供了eq助手。

- Vic Seedoubleyew

Answer 5

如果您需要一个不需要依赖的单行解决方案，您可以使用：

Handlebars.registerHelper('eq', (a, b) => a == b)

然后像其他示例所指出的那样将其用作嵌套调用：

{{#if (eq sampleString "This is a string"}}
...do something
{{/if}}

- dwightbcoder

Answer 6

我是通过谷歌搜索如何检查一个字符串是否等于另一个字符串来到这篇文章的。

我在NodeJS服务器端使用HandlebarsJS，但我也使用浏览器版本的HandlebarsJS在前端使用同样的模板文件进行解析。这意味着如果我想要自定义帮助程序，我必须在两个不同的地方定义它，或者将一个函数分配给相关对象——太麻烦了！

人们经常忘记某些对象具有可以在Mustache模板中使用的继承函数。在字符串的情况下：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/match

一个包含整个匹配结果和任何括号捕获的匹配结果的数组；如果没有匹配项，则为 null。

我们可以使用此方法返回匹配项的数组，或如果未找到匹配项，则返回 null。这很完美，因为根据HandlebarsJS文档http://handlebarsjs.com/builtin_helpers.html

您可以使用if帮助程序来有条件地渲染块。如果其参数返回false、undefined、null、""、0或[]，Handlebars将不会渲染该块。

所以......

{{#if your_string.match "what_youre_looking_for"}} 
String found :)
{{else}}
No match found :(
{{/if}}

更新:

经过在所有浏览器上的测试，在Firefox上无法正常工作。HandlebarsJS将其他参数传递给函数调用，这意味着调用String.prototype.match时，第二个参数（即上面文档中match函数调用的正则表达式标志）似乎被传递了。Firefox将其视为对String.prototype.match的弃用使用，因此导致了错误。

解决方法是声明一个新的String JS对象的可操作原型，并使用它代替原先的prototype:

if(typeof String.includes !== 'function') {
    String.prototype.includes = function(str) {
        if(!(str instanceof RegExp))
            str = new RegExp((str+'').escapeRegExp(),'g');
        return str.test(this);
    }
}

请确保在运行Handlebars.compile()函数之前，先包含此JS代码，并在您的模板中使用...

{{#your_string}}
    {{#if (includes "what_youre_looking_for")}} 
        String found :)
    {{else}}
        No match found :(
    {{/if}}
{{/your_string}}

- Jon

Answer 7

在Handlebars中，括号被用来调用作为函数的第一个列表项，并使用（可选的）后续项作为参数。因此，即使没有Ember，也可以使用Ember的语法，只要你能自己设置上下文。例如：

    context.eq = function(param1, param2) {
        return param1 === param2;
    }

    context.notEq = function(param1, param2) {
        return param1 !== param2;
    }

完成这一步后，您可以使用标准的 {{#if}} 和 {{#unless}} 块操作：

{{#if (eq someVar "someValue") }}

在使用{{with}}或内联部分时，请小心切换上下文。这样可能会使您追踪定义的“eq”函数变得困难。无论上下文如何，保证的工作方式是：

{{#if (@root.eq someVar "someValue") }}

- Joel Kozikowski

Answer 8

在handlebars中，不能直接比较字符串，必须使用helper。我尝试了上述解决方案，但在我的Koa应用程序中无法注册helper。以下代码适用于我，并且我认为这也适用于express应用程序。希望能对某些人有所帮助。

Code in server.js

var handlebars = require('koa-handlebars');

const isEqualHelperHandlerbar = function(a, b, opts) {
            if (a == b) {
                return opts.fn(this) 
            } else { 
                return opts.inverse(this) 
            } 
        }
        
app.use(handlebars({
    viewsDir: './app/views',
    layoutsDir: './app/views/layouts',
    defaultLayout: 'main',
    helpers : {
        if_equal : isEqualHelperHandlerbar
    }
}));

在HBS文件中的代码，其中fruit是要进行比较的变量：

 <select id={{fruit}}>
   <option >Choose...</option>
   <option value="apple" {{#if_equal fruit "apple"}} selected {{/if_equal}}>Apple</option>
   <option value="mango" {{#if_equal fruit "mango"}} selected {{/if_equal}} >Mango</option>
 </select>

- Ojus sangoi

Answer 9

有很多答案，但如果有人遇到和我一样的错误（基本上发送一个错误，指出 options.fn 和 options.reverse 不是函数），我将展示对我有效的解决方案，因此我决定使用子表达式帮助程序进行简单的解决，它有效了（出乎意料，因为我尝试了所有之前的解决方案，得到相同的错误）

简而言之，我只需在两个参数之间进行简单的比较，并返回所需的值，就像这样（使用 Helpers）

在你的 server.js || app.js 中

Handlebars.registerHelper('functionName', function (value, value2) {
    if(value == value2) {
        return this;
    }
  });

在这种情况下，我没有给出else条件，但如果你想的话，可以添加它，下面是hbs文件的写法。

{{#if (functionName value value2)}}

在我的情况中，我将一个来自我的数据库（MongoDB）的值放入value中，并且在value2中使用字符串进行比较。所以我认为你可以比较任何类型的值，如果你正在迭代每个值，请确保将if条件语句放在它们内部。

最后但同样重要的是，请确保在你的代码中有 const Handlebars = require('handlebars'); ，否则会出现错误，希望这能帮助到某些人。

你可以在这里了解有关子表达式的信息：这里。

- Steven León

Answer 10

一个简单、可重复使用的帮助函数的常见用例是，如果值相等，则返回string1，否则返回string2。

示例：

帮助函数（我们称之为“ifEqual”并发送4个参数）：

helpers: {

    ifEqual: function (obj, value, trueString, falseString) {
            return ( (obj===value) ? trueString : falseString );
}

模板使用：

在此示例中，假设模板接收一个带有“transactionType”属性的“transaction”对象：{ transactionType: "expense", description: "Copies" }

假设我们的模板有一个用于交易类型的<select>，其中包含各种选项<option>，如所示。我们想使用Handlebars预先选择与transactionType值相符的选项。

我们的新{{ ifEqual }}助手用于插入“selected”，以匹配“expense”的值的<option>。

<select required id="selTransactionType" name="selTransactionType" class="form-control" onchange='transactionTypeChanged()'>
   <option value='hourly' {{ ifEqual transaction.transactionType "hourly" "selected" "" }} >Hourly fee</option>
   <option value='flat' {{ ifEqual transaction.transactionType "flat" "selected" "" }} >Flat fee</option>
   <option value='expense' {{ ifEqual transaction.transactionType "expense" "selected" "" }} >Expense</option>
   <option value='payment' {{ ifEqual transaction.transactionType "payment" "selected" "" }} >Payment</option>
   <option value='credit' {{ ifEqual transaction.transactionType "credit" "selected" "" }} >Credit</option>
   <option value='debit' {{ ifEqual transaction.transactionType "debit" "selected" "" }} >Debit</option>
</select>

- Jeff Matthews