Datatables Handlebars使用未定义的常量

Question

我正在一个页面上显示带有行详细信息的数据表。我使用了网站上的信息如下：

@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

在调用的脚本id details-template中，如果我使用{{name}}，我会收到错误Use of undefined constant。但是，如果我改为添加一些简单的文字，那么一切都会有效（但我当然不会在这一行中获取我的数据。

我已在控制台日志中检查了row.data，并且我已获得所有可用数据。

有什么问题？

感谢。