InstantSearch在运行时返回唯一的allItems模板

Question

是否可以根据从API返回的项目显示不同的“匹配”模板？例如，假设我有两个模板。

const _FooTemplate = `
    <table class="table table-striped table-hover table-responsive">
      <thead>
        <tr>
          <th>Part Number</th>
          <th>Description</th>
          <th>Available Quantity</th>
        </tr>
      </thead>
      <tbody>
      {{#hits}}
        <tr>
          <td style="white-space:nowrap"><a href="{{ url }}">{{ code }}</a></td>
          <td>{{ description }}</td>
          <td>{{ quantityAvailable }}</td>
        </tr>
      {{/hits}}
      </tbody>
    </table>
  `;

const _BarTemplate = `
    <table class="table table-striped table-hover table-responsive">
      <thead>
        <tr>
          <th>Part Number</th>
          <th>Description</th>
          <th>Available Quantity</th>
          <th>EXTRA COLUMN - 1</th>
          <th>EXTRA COLUMN - 2</th>
        </tr>
      </thead>
      <tbody>
      {{#hits}}
        <tr>
          <td style="white-space:nowrap"><a href="https://www.lyntron.com/{{ url }}">{{ code }}</a></td>
          <td>{{ description }}</td>
          <td>{{ quantityAvailable }}</td>
          <td>{{ EXTRA_DATA_1 }}</td>
          <td>{{ EXTRA_DATA_2 }}</td>
        </tr>
      {{/hits}}
      </tbody>
    </table>
  `;

我的搜索窗口小部件看起来像这样...

    search.addWidget(
        instantsearch.widgets.hits({
            container: '#hits',
            templates: {
                empty: 'No results',
                allItems: (function($hitsObject) {
                    return templateFactory($hitsObject);
                })
            },
            cssClasses: {
                item: 'col-lg-12 col-md-12 col-sm-12'
            }
        })
    );

我的模板工厂具有确定我要拔出_FooTemplate还是_BarTemplate的逻辑。

function templateFactory($hits) {
    //Logic to determine which template to return.  For now hardcode one.

    return _FooTemplate;
}

当我使用这种方法时，我在HTML端的点击div被转义并且没有呈现校正。如何使渲染发生？我是在某个地方转义HTML吗？

目前正在获取结果...

我希望得到这个结果。正确渲染。