Handlebars.js中如何在传递Partial参数前执行条件语句

嘿，这个问题我太熟了！你现在遇到的核心问题是：Handlebars不会解析你放在参数值里的模板语法，直接把带{{#if}}的字符串原样传给partial了，所以才会出现把条件语句当文本输出的尴尬情况。

给你几个实用的解决办法：

方法一：自定义拼接Helper，提前计算参数值 #

Handlebars原生没有字符串拼接的helper，但我们可以自己写一个超简单的，先在JS代码里注册它：

Handlebars.registerHelper('concat', function() {
  // 把传入的所有参数（除了最后一个Handlebars的options对象）拼接起来
  return Array.prototype.slice.call(arguments, 0, -1).join('');
});

然后在模板里，用这个helper把基础class和条件判断的结果拼接好，再传给partial：

{{> 'navItem' toggleClass=(concat "utility-toggle" 
  (if isAccount " utility-toggle--account" "")
  (if isCart " utility-toggle--cart" "")
)}}

这里用的是(if)的表达式写法（不是块级的{{#if}}），它会根据条件返回对应的字符串，再通过concat把所有部分无缝拼起来。

方法二：把条件逻辑移到Partial里（如果场景合适） #

如果你觉得partial可以承担这个条件判断的逻辑，也可以直接把isAccount和isCart这两个变量传给partial，在partial内部处理class的拼接：
主模板调用：

{{> 'navItem' isAccount=isAccount isCart=isCart}}

Partial内部：

class="utility-toggle{{#if isAccount}} utility-toggle--account{{else if isCart}} utility-toggle--cart{{/if}}"

这种方式适合你希望partial自己处理样式逻辑的场景，不过如果要保持partial的通用性，还是第一种方法更合适。

为什么原来的写法不行？ #

你之前直接把包含{{#if}}的字符串作为参数值，Handlebars会把它当成纯文本对待——它只会解析最外层的{{> navItem ...}}调用，参数里的内容只会原封不动传过去，不会去解析里面的模板语法，所以才会出现把条件语句输出成文本的情况。

备注：内容来源于stack exchange，提问作者allicarn