Как использовать предварительно скомпилированные шаблоны с помощью Handlebarsjs

Question

Я использую handlebarsjs для создания шаблонов в приложении ASP.NET Core.

Я хочу предварительно завершить шаблон и сохранить его значение в `div. Затем по нажатию кнопки извлеките предварительно скомпилированный шаблон и передайте контекстную информацию

(кстати, в производстве мы будем хранить предварительно скомпилированный шаблон в базе данных sql, а не в div)

JSFiddle

Html

<!-- store pre-complied source -->
<div id="preCompileSrc"></div>
<p/>

<!-- click button to evaluate -->
<button type="button" id="btn">Click Me</button>

<!-- rendered html -->
<div id="myhtml"></div>

<!-- template -->
<script id="entry-template" type="text/x-handlebars-template">
    <div>
        <h1>{{title}}</h1>
        <div class="body">
            {{body}}
        </div>
    </div>    
</script>

JavaScript

$(function () {

    // store pre-compiled into div
    var source = $("#entry-template").html();
    var str = Handlebars.precompile(source);
    $("#preCompileSrc").text(str);


  $("#btn").click(function () {
        evaluatePreCompile();
    }); 


  function evaluatePreCompile() {
    var data = getData();
    var str = $("#preCompileSrc").text();
    var template = Handlebars.template(str); // throws error here
    var html = template(data);
    $("#myhtml").html(html);
  }

  function getData() {
    return {
      title: "My New Post",
      body: "This is my first post!",
      people: [
        { firstName: "Yehuda", lastName: "Katz" },
        { firstName: "Carl", lastName: "Lerche" },
        { firstName: "Alan", lastName: "Johnson" }
      ]

    };
  }
});

В настоящее время я получаю сообщение об ошибке ниже, когда нажимаю кнопку