Question

请考虑以下表格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，当有新数据可用时，我将使用该var rowPartial = Handlebars.partials["testTableRowTemplate"]; //doesn't work动态刷新表。但是，我希望只能定位到一行，因此我只需要“ testTableRowTemplate”部分的HandlebarsTemplateDelegate即可执行此操作。有什么办法可以从代码中做到这一点？编译主模板后，我尝试了以下每种方法，但无法访问部分模板。

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

和

(base) C:\Users\sherv>

我希望避免在表中包含多个.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环境来解决此问题，但这超出了我的需要。

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来部分刷新表行，而不必刷新整个内容。

有什么办法可以部分地以编程方式引用车把吗？

1 个答案: