如何使用句柄模板动态加载不同的partials？ [英] How do I load different partials dynamically using handlebars templates?

问题描述

我使用以下数据加载模板：

 幻灯片：[
 {
template：video，
data：{
video：
} 
}，
 {
模板：图片，
数据：{
图片：
} 
} 
] 
  
  
 
 $ b 
 
 
  {{＃每张幻灯片}} 
 {{> resources_templates_overlay_video}} 
 {{/ each}} 
  
如何动态调整此部分负载（根据配置的模板）？
 
 
 
我使用 require-handlebars-plugin  
解决方案
据我所知，hbs预计在编译时知道部分内容，这是在传递数据之前的方式。我们来解决这个问题。  
 
 
首先，在渲染之前拉动你的动态偏色，如下所示：
  //我为了简单起见需要主模板，但它可以在任何地方使用
 var templates = ['hbs！resources / templates / maintemplate']，l = data.slides。长度; 
 for（var i = 0; i  templates.push（'hbs！resources / templates / overlay /'+ data [i] .template）; 
 
 require（templates，function（template）{
 var html = template（data）; 
}）; 
  
定义一个辅助函数，它将充当动态的部分
 
 
  define（['Handlebars']，function（Handlebars）{
 
 function template templatetemplate（template，context，opts ）{
 template = template.replace（/ \ // g，'_'）; 
 var f = Handlebars.partials [template]; 
 if（！f）{
 returnPartial not loaded; 
} 
 
 return new Handlebars.SafeString（f（context））; 
} 
 
 Handlebars.registerHelper （'dynamictemplate'，dynamictemplate）; 
 return dynamictemplate; 
}）; 
  
最后，修改您的主模板，使其看起来像
  {{＃each slides}} 
 {{this.template this.data}} 
 {{/ each} } 
  




I'm loading a template with the following data:

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

in my template I want to loop over these slides and based on the configured template I want to load a partial

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

How can I make this partial load dynamically (based on the configured template)?

I'm using the require-handlebars-plugin

解决方案

As far as I can tell, hbs expects the partials to be known at compile time, which is way before you pass in your data. Let's work around that.

First, pull in your dynamic partials before rendering, something like:

// 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);
});

And define a helper that will act as a dynamic partial

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;
});

Finally, modify your main template to look like

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

这篇关于如何使用句柄模板动态加载不同的partials？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！