<script id="node" type="text/x-handlebars-template">
  <div>常规的partial代码片段</div>
  {{> dynamicPartial}}
<div>动态的代码片段</div>
  {{> (whichPartial) }}
<div>动态的带参数的函数代码片段</div>
  {{> (paramsPartial 'partial2')}}
</script>
<div id="container"></div>
// 通过注册函数代码块助手的方式
Handlebars.registerHelper('whichPartial', function(context, options){
  return 'dynamicPartial';
});

Handlebars.registerHelper('paramsPartial', function(params){
  return params;
});

Handlebars.registerPartial('partial1', '<span>我是片段一</span>');
Handlebars.registerPartial('partial2', '<span>我是片段二</span>');

Handlebars.registerPartial('dynamicPartial', '{{name}}');



var source = $("#node").html();
var template = Handlebars.compile(source);
var context = { name: "Koby" };
var html = template(context);
$('#container').html(html);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js