Handlebars的if表达式中如何转义使用Web组件本地上下文

你之前用\{{person.name}}能正常读取Web组件内部上下文，本质是反斜杠是Handlebars的模板转义符，作用是让当前这层Handlebars编译器完全跳过对这个{{}}表达式的解析，直接把{{person.name}}字符串原样输出到DOM中，后续由<mycomponent>组件自身的模板渲染逻辑来解析这个表达式。

而{{#if}}是Handlebars的块级助手语法，整个{{#if 条件}}...{{/if}}结构需要先被外层Handlebars编译器完整解析。你之前尝试的几种写法，都是在外层Handlebars要解析的#if表达式内部插转义符，属于非法语法，会直接触发编译报错，根本到不了Web组件渲染的环节：

• 把反斜杠写在变量名前：外层Handlebars会尝试解析名为\person.name的不存在的变量
• 加括号包裹的写法：完全不符合Handlebars的表达式语法规则，直接报语法错误

你只需要把整个#if块的起止标签都做转义，让外层Handlebars把完整的if判断逻辑原样输出给Web组件，由组件自身的模板引擎解析执行即可，不需要在条件内部加任何转义符：

\{{#if person.displayName}}
  <p>{{person.displayName}}</p>
\{{/if}}

<!-- 打印根上下文 -->
{{JSONstringify @root}}
<ul>
  {{#each @root.data.items as |item|}}
  <li>
    <!-- mycomponent会在模板内部暴露名为person的对象-->
    <mycomponent id="{{item.ID}}">
       <template>
        <!-- 打印item对象 -->
        {{JSONstringify .}}
    
        <!-- 打印person对象 -->
        \{{person}}

        <!-- person字段存在时打印其displayName -->
        <p>\{{person.displayName}}</p>

        <!-- 修正后的条件判断写法 -->
        \{{#if person.displayName}}
        <p>{{person.displayName}}</p>
        \{{/if}}
      </template>
    </mycomponent>
  </li>
  {{/each}}
</ul>

• Handlebars的转义符\只能写在完整{{}}表达式的最开头，作用范围是当前这一个完整的{{}}结构，不能写在表达式内部、参数位置
• 只要是需要交给内层Web组件解析的Handlebars语法，不管是普通插值还是块级助手（if、each、自定义助手等），都要在对应{{}}的最开头加\转义，让外层编译器跳过解析

内容的提问来源于stack exchange，提问作者Gurdev Singh