BigCommerce Stencil对接Handlebars JS报dynamicComponent缺失如何注册forms组件

报错原因 #

dynamicComponent是BigCommerce Stencil框架内置的服务端Handlebars助手，仅在Stencil服务端渲染模板时可用。你在前端手动调用原生Handlebars编译自定义模板时，没有提前注册该助手，也没有关联对应forms组件的渲染逻辑，因此会抛出缺失助手的报错。

解决方案 #

方案1：手动注册dynamicComponent助手适配forms组件 #

在你的Handlebars编译逻辑之前，先添加助手注册代码，将components/common/forms路径对应到你实际的forms组件渲染逻辑：

// 注册dynamicComponent助手
Handlebars.registerHelper('dynamicComponent', function(componentPath, options) {
  if (componentPath === 'components/common/forms') {
    // 替换下方模板内容为你项目中/templates/components/common/forms.hbs的实际代码
    const formFieldTpl = Handlebars.compile(`
      <div class="form-field {{#if modifier}}form-field--{{modifier}}{{/if}}">
        <label class="form-label" for="{{name}}">
          {{label}}
          {{#if required}}<span class="form-required">*</span>{{/if}}
        </label>
        <input 
          class="form-input" 
          type="{{type}}" 
          name="{{name}}" 
          id="{{name}}" 
          value="{{value}}"
          {{#if required}}required{{/if}}
          {{#if pattern}}pattern="{{pattern}}"{{/if}}
        >
        {{#if error}}<span class="form-inlineMessage">{{error}}</span>{{/if}}
      </div>
    `);
    return new Handlebars.SafeString(formFieldTpl(this));
  }
  return '';
});

// 原有编译逻辑保持不变
var template = $("#address_template").html();
var compiledCode = Handlebars.compile(template);
var result = compiledCode({fields: state.data.getShippingAddressFields()});
$('body').html(result);

方案2：直接内联forms组件代码，去掉动态组件调用 #

不需要注册任何助手，直接把forms组件的代码写到你的自定义模板中，替换掉dynamicComponent调用即可：

<script id="address_template" type="text/x-handlebars-template">
    <fieldset class="form-fieldset">
        <div class="form-row form-row--half">
            {{#each fields}}
                <!-- 替换为你项目中forms组件的实际结构 -->
                <div class="form-field {{#if modifier}}form-field--{{modifier}}{{/if}}">
                  <label class="form-label" for="{{name}}">
                    {{label}}
                    {{#if required}}<span class="form-required">*</span>{{/if}}
                  </label>
                  <input 
                    class="form-input" 
                    type="{{type}}" 
                    name="{{name}}" 
                    id="{{name}}" 
                    value="{{value}}"
                    {{#if required}}required{{/if}}
                    {{#if pattern}}pattern="{{pattern}}"{{/if}}
                  >
                  {{#if error}}<span class="form-inlineMessage">{{error}}</span>{{/if}}
                </div>
            {{/each}}
        </div>
    </fieldset>
</script>

注意事项 #

上述两种方案中的表单字段结构，需要和你项目中实际使用的components/common/forms组件代码完全一致，避免渲染出来的样式和交互和站点原有表单不匹配。

内容的提问来源于stack exchange，提问作者Alex Brend