javascript - 如何使用 Handlebars 模板动态加载不同的部分？

Question

我正在加载包含以下数据的模板:

"slides": [
    {
        "template": "video",
        "data": {
            "video": ""
        }
    },
    {
        "template": "image",
        "data": {
            "image": ""
        }
     }
]

在我的模板中，我想循环播放这些幻灯片并根据配置的模板加载部分

{{#each slides}}
    {{> resources_templates_overlay_video }}
{{/each}}

我怎样才能使这个部分加载动态(基于配置的模板)？

我正在使用 require-handlebars-plugin

Answer 1

据我所知，hbs 期望在编译时知道部分，这是在您传递数据之前。让我们解决这个问题。

首先，在渲染之前拉入你的动态部分，比如:

// I required the main template here for simplicity, but it can be anywhere
var templates = ['hbs!resources/templates/maintemplate'], l = data.slides.length;
for (var i=0; i<l; i++ )
    templates.push('hbs!resources/templates/overlay/'+data[i].template);

require(templates, function(template) {
    var html = template(data);
});

并定义一个将充当动态部分的助手

define(['Handlebars'], function (Handlebars) {

    function dynamictemplate(template, context, opts) {
        template = template.replace(/\//g, '_');
        var f = Handlebars.partials[template];
        if (!f) {
            return "Partial not loaded";
        }

        return new Handlebars.SafeString(f(context));
    }

    Handlebars.registerHelper('dynamictemplate', dynamictemplate);
    return dynamictemplate;
});

最后，修改你的主模板看起来像

{{#each slides}}
    {{dynamictemplate this.template this.data}}
{{/each}}