动态组件模板

Question

在我的 Stencil 主题中，我包含了一些不同的产品尺寸图表，我打算通过更改尺寸图表文档的路径来包含这些图表。我在 Stencil 文档中找到 dynamicComponent，我想我理解它的工作方式。在我的更高级别部分，我以这种方式将字符串绑定到组件 - (product.html)

<div class="container" itemscope itemtype="http://schema.org/Product">
    {{> components/products/product-view schema=true sizeChart='components/products/size_charts/tshirt.html'}}

    {{#if product.videos.list.length}}
        {{> components/products/videos product.videos}}
    {{/if}}

    {{#if settings.show_product_reviews}}
        {{> components/products/reviews reviews=product.reviews product=product urls=urls}}
    {{/if}}

</div>

(产品-view.html)

{{#if sizeChart}}
<div class="tab-content" id="tab-sizeChart">
    {{dynamicComponent sizeChart}}
</div>
{{/if}}

我想改变的是未来主题维护中的变量sizeChart。页面渲染的时候，我写dynamicComponent的地方是空白的

Answer 1

我使用 if 条件而不是 dynamicComponent。这不是我想的那样。

动态组件模板

dynamicComponent Stencil

handlebars.js

bigcommerce