<script id="node" type="text/x-handlebars-template">
  这里是来自于三种helper规则的使用<br>
  {{fun2 (fun1 name) country='中国' sex='男' }}
</script>
<div id="container"></div>
Handlebars.registerHelper('fun1', function(aString){
  return '<b>' + Handlebars.escapeExpression(aString) + '</b>';
});
Handlebars.registerHelper('fun2', function(text, options){
  console.info(options);
  var country = Handlebars.escapeExpression(options.hash['country']);
  var sex = Handlebars.escapeExpression(options.hash['sex']);
  return new Handlebars.SafeString(text + ',出生于:' + country + ',性别:' + sex + '!');
});

var source = $("#node").html();
var template = Handlebars.compile(source);
var context = { 
  name: "Koby111" 
};
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