Datatables Handlebars Use of undefined constant - laravel

Question

I am working on a a page to display a datatables with row details. I have used exactly the info on the website as follow:
#extends('layouts.app')
#section('style')
<!-- CSS -->
<!-- Select2 -->
<link href="{{ asset('/plugins/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('/plugins/datatables/dataTables.bootstrap.css') }}">
#stop
#section('scriptsrc')
<!-- JS -->
<!-- Select2 -->
<script src="{{ asset('/plugins/select2/select2.full.min.js') }}" type="text/javascript"></script>
<!-- DataTables -->
<script src="{{ asset('/plugins/datatables/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('/plugins/datatables/dataTables.bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('/plugins/datatables/handlebars.js') }}"></script>
#stop
#section('content')
<!-- table widget -->
<div class="box box-info">
<div class="box-header">
<i class="fa fa-cloud-download"></i>
<h3 class="box-title">Employee List</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div>
<div class="box-body">
<table id="employeeTable" class="display table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Manager name</th>
<th>Name</th>
<th>Manager ID</th>
<th>Is Manager</th>
<th>Region</th>
<th>Country</th>
<th>Domain</th>
<th>Subdomain</th>
<th>Management Code</th>
<th>Job role</th>
<th>Type</th>
</tr>
</thead>
</table>
<script id="details-template" type="text/x-handlebars-template">
<table class="extra_info display table-bordered table-hover" cellspacing="0" width="50%">
<tr>
<td>Full name:</td>
<td>{{ name }}</td>
</tr>
</table>
</script>
</div>
</div>
#stop
#section('script')
<script>
$(document).ready(function() {
var employeeTable;
var template = Handlebars.compile($("#details-template").html());
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
employeeTable = $('#employeeTable').DataTable({
serverSide: true,
processing: true,
ajax: {
url: "{!! route('ajaxlistemployee') !!}",
type: "POST"
},
columns: [
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
{ data: 'id', name: 'employee.id'},
{ data: 'manager_name', name: 'manager.name'},
{ data: 'name', name: 'employee.name'},
{ data: 'manager_id', name: 'employee.manager_id'},
{ data: 'is_manager', name: 'employee.is_manager'},
{ data: 'region', name: 'employee.region'},
{ data: 'country', name: 'employee.country'},
{ data: 'domain', name: 'employee.domain'},
{ data: 'subdomain', name: 'employee.subdomain'},
{ data: 'management_code', name: 'employee.management_code'},
{ data: 'job_role', name: 'employee.job_role'},
{ data: 'employee_type', name: 'employee.employee_type'},
],
columnDefs: [
{
"targets": [1, 4, 5], "visible": false, "searchable": false
}
],
order: [[2, 'asc']]
} );
// Add event listener for opening and closing details
$('#employeeTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = employeeTable.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
console.log(row.data());
row.child( template(row.data()) ).show();
tr.addClass('shown');
}
});
} );
</script>
#stop
In the script id details-template that is called, if I use {{ name }}, I get the error Use of undefined constant. But if I put some simple text instead, then everything works (but I don't get my data in this row details of course.
I have checked row.data in the console log and I have all the data available.
What is wrong?
Thanks.