Handlebarsjs 检查字符串是否等于值

在 Handlebars，是否可以在不注册助手的情况下检查一个字符串是否等于另一个值？我在车把上找不到任何与此相关的东西。

例如:

{{#if sampleString == "This is a string"}}
...do something
{{/if}}
151990 次浏览
小开
最佳答案

看来你不能“直接”做

尝试使用帮手，为什么不呢？

在 javascript 代码中注册 helper:

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

更多详情请浏览此网页: 条件句中的逻辑运算符

更新: 另一种方式:

让我们假设，你的数据是:

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}}
小开

刚刚从谷歌搜索到这篇文章，关于如何检查一个字符串是否等于另一个字符串。

我在 NodeJS 服务器端使用 HandlebarsJS，但是我也在前端使用相同的模板文件，使用 HandlebarsJS 的浏览器版本来解析它。这意味着，如果我想要一个自定义助手，我必须在两个不同的地方定义它，或者为有问题的对象分配一个函数-太多的工作！

人们忘记的是，某些对象具有可以在胡子模板中使用的继承函数。在字符串的情况下:

Https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/string/match

包含整个匹配结果和任何括号捕获的匹配结果的 Array; 如果没有匹配，则为 null。

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

可以使用 if 帮助器有条件地呈现块。如果它的参数返回 false、 unDefinition、 null、“”、0或[] ，Handlebar 将不会呈现该块。

那么..。

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

更新:

在所有浏览器上测试后，这在 Firefox 上不起作用。HandlebarsJS 将其他参数传递给函数调用，这意味着当调用 String.Prototype.match 时，第二个参数(即匹配函数调用的 Regexp 标志，如上述文档所示)似乎正在被传递。Firefox 认为这种做法不适合使用 String.Prototype.match，因此不予采用。

一个解决方案是为 String JS 对象 声明一个新的函数原型，然后使用它:

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

确保这个 JS 代码包含 之前，然后运行 Handlebars.edit ()函数，然后在模板中..。

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

上一个使用 火柴的答案对我来说不起作用，我在 如果语句上得到一个错误(类似于“必须只有一个参数”)。

但是，我刚刚找到了解决方案 给你，不需要编写任何助手:

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

Mandrill 邮件服务支持 Handlebar，在这里可以使用“ backticks”来计算 # if 块中的逻辑表达式:

\{\{#if `operating_system == "OS X"`}}
<p>Click here for instructions to install on a Mac</p>
\{\{elseif `operating_system == "Windows"`}}
<p>Click here for instructions to install on a PC</p>
\{\{/if}}

我不知道这是否可行，但你应该试试。 我觉得挺好的。

小开

车把有一个叫做“等于”的条件运算符，它有两个参数:

变量

2. 检查变量是否包含。

例如，检查“ status”是否包含“ Full Time”:

\{\{#equal status "Full Time"}}  //status is the variable and Full Time is the value your checking for.
code to be executed
\{\{else}}
code to be executed
\{\{/equal}}
小开

对于一个简单的、可重用的 helper 函数，一个常见的情况是，如果值相等，返回 string1; 如果值不相等，返回 string2。

示例:

Helper (让我们称之为“ ifequals”并发送4个参数) :

helpers: {


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

模板使用:

对于本例，假设模板接收具有“ transactionType”属性的“ transactionType”对象: { transactionType: "expense", description: "Copies" }

假设我们的模板有一个用于事务类型的 <select>，其中包含如图所示的各种 <option>s。我们希望使用 Handlebar 预先选择与 transactionType 值一致的选项。

我们的新的 \{\{ ifEqual }}助手用于为 <option>插入“ select”，其匹配值为“ Cost”

<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>
小开

我会用这样的帮手:

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}}
小开

不能直接比较把手中的字符串，必须使用助手。我用我的 Koa 应用程序尝试了上面的解决方案，但是无法注册助手。下面的代码适合我，我认为这也应该适用于快递应用程序。我希望这能帮到别人。

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 文件中的代码，其中水果是要比较的变量: 

 <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>

小开

在 Handlebar 中，括号用于调用作为函数列出的第一个项，并使用(可选的)后续项作为参数。因此，来自 Ember CAN 的语法可以不使用 Ember，前提是您可以自己设置上下文。例如:

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


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

这样做之后，您就可以使用标准的\{\{ # if }和\{\{}除非}块操作:

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

使用\{\{ with }}或使用内联分词切换上下文时要小心。您可能会忘记已定义的“ eq”函数。无论新环境如何，保证工作的方式:

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

在 server.js 中添加这个

const isEqual = function(a, b, opts) {
if (a == b) {
return opts.fn(this)
} else {
return opts.inverse(this)
}
}


var hbs = require('hbs');
hbs.registerHelper('if_eq', isEqual);
小开

使用 车把-助手，它提供 eq助手

小开

试试:

} ... {/is }

小开

我遇到了和 OP 一样的困难，我决定把调用转租给 Javascript，而不是试图让 Handlebar 屈服于我的意志... ..。

Javascript 函数(在全局范围内)-

function jsIfElse(compare1, compare2, trueResponse, falseResponse) {
document.write((compare1 == compare2) ? trueResponse : falseResponse);
}

把手片段-

<select multiple id="batter_player_team">
\{\{#each teamNamesForFilter}}
<option value="\{\{this.id}}">                     <script>jsIfElse('\{\{this.is_active}}','Y','\{\{this.name}} *', '\{\{this.name}}');</script>
</option>
\{\{/each}}
</select>
小开

对于不需要依赖项的单行解决方案，可以使用:

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

然后使用它，就像其他例子中提到的嵌套调用一样:

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

这里有很多答案，但是如果有人和我有相同的错误，我会展示什么对我有效(基本上发送给我一个错误，options.fn 和 options.return 不是函数) ，所以我决定使用子表达式助手寻找一个简单的解决方案，它工作(不受尊重，因为我尝试了所有的 before 解决方案，得到相同的错误)

简而言之，我只是对两个参数进行一个简单的比较，然后返回所需的值，如下所示(使用帮助器)

在你的服务器中


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

在这个例子中，我没有给出 else 条件，但是如果你愿意，你可以这样做，这里是 hbs 文件应该怎么做

\{\{#if (functionName value value2)}}

在我的 value 中，我放入了我的 Database (MongoDB)的值，在 value2中，我用来比较一个 String，所以我认为你可以比较任何类型的值，同样，如果你在 each 上迭代，确保你在它们中放入了 if 条件

最后但同样重要的是确保你的代码中有 const Handlebars = require('handlebars');或者会发送错误信息给你，希望能帮到别人

你可以阅读子表达式 给你


提交答案