有没有办法以编程方式引用 Handlebars 内联部分？

Question

考虑以下 table template.hbs:

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        {{#* inline "testTableRowTemplate"}}
        <tr>
            <td>{{Id}}</td>
            <td>{{Name}}</td>
            <td>{{Value}}</td>
        </tr>
        {{/inline}}
        {{#* inline "testTableEmptyTemplate"}}
        <tr>
            <td colspan="99">There are no rows</td>
        </tr>
        {{/inline}}
        {{#* inline "testTableLoaderTemplate"}}
        <tr>
            <td colspan="99">
                <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
                <span class="sr-only">Loading...</span>
            </td>
        </tr>
        {{/inline}}
    </tbody>
</table>

根据代码，我使用 ajax 调用加载此模板，并将其编译为 HandlebarsTemplateDelegate，当新数据可用时，我使用它动态刷新 table。但是，我希望能够只定位一行，所以我需要一个仅 "testTableRowTemplate" 部分的 HandlebarsTemplateDelegate 才能执行此操作。有什么办法可以从代码中做到这一点？我在编译主模板后尝试了以下各项，但无法访问部分模板。

var rowPartial = Handlebars.partials["testTableRowTemplate"]; //doesn't work

和

var rowPartial = Handlebars.compile("{{>testTableRowTemplate}}"); //doesn't work

我希望避免 table 有多个 .hbs 文件，因此理想情况下我能够在同一个文件中定义可重用的部分。有什么想法吗？

Answer 1

您似乎无法从代码中引用这些内容。我的解决方法如下：

Table.hbs

您会注意到这里使用了自定义助手 registerPartial。这允许我动态注册一个车把助手。

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        {{#registerPartial "testTableRowTemplate"}}
        <tr>
            <td>{{Id}}</td>
            <td>{{Name}}</td>
            <td>{{Value}}</td>
        </tr>
        {{/registerPartial}}
    </tbody>
</table>

Page.ts

在页面级别，我定义了助手registerPartial。请务必注意，这将注册到全局 Handlebars 环境。因此，所有部分名称都必须是唯一的。这可以通过为每个组件声明一个 Handlebars 环境来解决，即 Table、List 等，但这超出了我需要的范围。

Handlebars.registerHelper('registerPartial', (name, options) => Handlebars.registerPartial(name, options.fn));

Table.ts

通过 Handlebars.compile(templateContentFromTablehbs) 加载 Table.hbs 模板后，我现在可以通过这样做获得对行部分的编译引用：

this._rowTemplate = Handlebars.compile(`{{>${this._rowPartialName}}}`);

现在我可以重新使用 this._rowTemplate 来部分刷新 table 行，而不必刷新整个行。

有没有办法以编程方式引用 Handlebars 内联部分？

Is there any way to reference a Handlebars inline partial programmatically?

javascript

handlebars.js

typescript