<script id="node">
  <h1>{{title}}</h1>
  <div>
    {{#noop}}{{body}}{{/noop}}
  </div>
  <div>
    {{foo '我是字符串'}}
  </div>
</script>
<div id="container"> 
</div>
Handlebars.registerHelper('noop', function(options){
  console.group('noop的输出');
  console.info(options);
  console.info(this);
  return options.fn(this);
});
Handlebars.registerHelper('foo', function(text){
  console.group('foo的输出');
  console.info(this);
  return text;
});


var source = $("#node").html();
var template = Handlebars.compile(source);
var context = { 
  title: "我是被包裹的标题" ,
  body: "我是被包裹的内容"
};
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