Uncaught TypeError: Handlebars.compile is not a function

Question

Here is my html:

<table id="tableUserPaymentTypeRight">
     <col width="50%"/>
     <col width="25%"/>
     <col width="25%"/>
     <script id="rowUserPaymentTypeRight" type="text/x-handlebars-template">
          {{#each Data}}
              <tr>
                 <td>{{FullName}}</td>
                 <td>
                     {{#if Right_Add}}
                          <input type="checkbox" value="{{UserID}}_0" checked/>
                     {{else}}
                          <input type="checkbox" value="{{UserID}}_0"/>
                 </td>
                 <td>
                      {{#if Right_Confirm}}
                          <input type="checkbox" value="{{UserID}}_1" checked/>
                      {{else}}
                          <input type="checkbox" value="{{UserID}}_1"/>
                 </td>
            </tr>
       {{/each}}
</script>

And here is my js:

var userPaymentTypeRight = $('#rowUserPaymentTypeRight').html();
var userPaymentTypeRightTpl = Handlebars.compile(userPaymentTypeRight);
var context = data;
var html = userPaymentTypeRightTpl(context);
$('#tableUserPaymentTypeRight').html(html);

data like this:

{
{UserID: 26031, FullName: "Aaron Zubler", Right_Add: null, Right_Confirm:null, RowIndex: 1},
{UserID: 26390, FullName: "Achilleas Hoppas", Right_Add: null, Right_Confirm: null, RowIndex: 2},
{UserID: 26168, FullName: "Ai Ke", Right_Add: null, Right_Confirm: null, RowIndex: 3},
{UserID: 26310, FullName: "Alessandra Giordanella", Right_Add: null, Right_Confirm: null, RowIndex: 4}
}

It seems right according to the API,but I just got the error: Uncaught TypeError: Handlebars.compile is not a function.

Answer 1

In my case, the error happened because I was using the runtime version of the Handlebars. Since I don't intend to precompile my templates (which is not recommended) I've moved to the normal version.

The answer provided by @JL Peyret helped me found out the real problem.