尝试在我的laravel 5.5.40 / Voyager模板("tcg/voyager":"^1.0")/ Bootstrap 3.3.7应用程序中实现数据表行详细信息功能(https://datatables.yajrabox.com/eloquent/row-details)我遇到错误:

app.js:24 Uncaught ReferenceError: Handlebars is not defined

谷歌搜索,我发现了一个决定:

var Handlebars = require('handlebars');

但是我收到了一个错误:

articles:915 Uncaught ReferenceError: require is not defined

我发现文件config / voyager.php中附加了哪些文件:

...
    // Here you can specify additional assets you would like to be included in the master.blade
    'additional_css' => [
        'css/bootstrap-tagsinput-typeahead.css',
        'css/bootstrap-tagsinput.css',
        'css/bootstrap-treeview.css',
        'css/customisation.css',
        'css/spectrum.css',
    ],

    'additional_js' => [
        'js/bootstrap-tagsinput.js',
        'js/spectrum.js',
    ],
   ...

你能给出一个提示,我要将哪个文件/插件附加到上面的列表中?在项目中我找到了一个文件 /node_modules/webpack/lib/RequireJsStuffPlugin.js 这是我需要的,如何附加它以及如何?

谢谢!

修改:谷歌搜索后我安装了

npm install requirejs

与输出

+ requirejs@2.3.5
added 1 package from 1 contributor in 26.245s

但它没有帮助,我仍然得到错误:

ReferenceError: require is not

必须在一些配置文件或我的脚本中包含requirejs,如果是的话?

修改2:

使用资源How do I include a JavaScript file in another JavaScript file?我尝试通过示例修复错误:

我刚刚编写了这个JavaScript代码(使用Prototype进行DOM操作):

因为我复制了文件/public/js/require.js(原型JavaScript框架,版本1.7.2)和文件public / js / require.js by url https://gist.github.com/nornagon/284442

在我的刀片模板中:

<script src="/js/prototype.js"></script>
<script src="/js/require.js"></script>
@section('javascript')

并得到错误:

Uncaught TypeError: element.attachEvent is not a function
    at observeStandardEvent (prototype.js:6950)
    at observe (prototype.js:6940)
    at HTMLScriptElement._methodized [as observe] (prototype.js:456)
    at require.js:21
    at showArticleListing (articles:1021)
    at HTMLDocument.<anonymous> (articles:896)
    at c (app.js:24)
    at u (app.js:24)

在一条线上:

var Handlebars = require('handlebars');

在上面的链接上有几个附加js文件的例子 . 但我的情况有所不同,因为有错误:

Uncaught ReferenceError: Handlebars is not defined

我试图包括Handlebars,但在我的项目中没有像Handlebars.js这样的文件......?

修改3:

在示例的注释中,使用Mustache.js解决了问题:https://github.com/yajra/laravel-datatables/issues/1511我遵循它,如下:

@extends('layouts.master')

@section('content')


    <table class="table table-bordered" id="users-table">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Created At</th>
            <th>Updated At</th>
        </tr>
        </thead>
    </table>

@stop

@push('scripts')

    <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

    <script id="details-template" type="mustache/x-tmpl">
    <table class="table">
        <tr>
            <td>Full name:</td>
            <td><%name%></td>
        </tr>
        <tr>
            <td>Email:</td>
            <td><%email%></td>
        </tr>
        <tr>
            <td>Extra info:</td>
            <td>And any further details here (images etc)...</td>
        </tr>
    </table>
    </script>

    <script  >

        $(function() {

            Mustache.tags = ["<%", "%>"];
            var template = $('#details-template').html();

            console.log("template::")
            console.log( template )

            var table= $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{!! route('get_users') !!}',
                columns: [
                    {
                        "className":      'details-control',
                        "orderable":      false,
                        "searchable":     false,
                        "data":           null,
                        "defaultContent": ''
                    },

                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'updated_at', name: 'updated_at' }
                ]
            });


            // Add event listener for opening and closing details
            $('#users-table tbody').on('click', 'td.details-control', function () {
                console.log( '-1' )
                var tr = $(this).closest('tr');
                console.log("-2 tr::")
                console.log( tr )

                var row = table.row( tr );
                console.log("-3 row::")
                console.log( row )


                if ( row.child.isShown() ) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
//                    row.child( template(row.data()) ).show();
                    row.child( Mustache.render(template, row.data()) ).show();
                    console.log("row::")
                    console.log( row )


                    tr.addClass('shown');
                }
            });
        });
    </script>

@endpush

我得到了错误:

jquery.dataTables.min.js:59 Uncaught TypeError: Cannot read property 'style' of undefined
    at Ga (jquery.dataTables.min.js:59)
    at ga (jquery.dataTables.min.js:45)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:93)
    at Function.each (jquery.js:383)
    at jQuery.fn.init.each (jquery.js:136)
    at jQuery.fn.init.m [as dataTable] (jquery.dataTables.min.js:83)
    at jQuery.fn.init.P.h.fn.DataTable (jquery.dataTables.min.js:159)
    at HTMLDocument.<anonymous> (index:89)
    at fire (jquery.js:3119)
    at Object.fireWith [as resolveWith] (jquery.js:3231)

查看控制台,找到了模板代码:https://imgur.com/a/WOJPsUw
因为对于放置模板的位置存在误解

I have no error if to remove the definition of the first column:
                    {
                        "className":      'details-control',
                    ...

有办法解决吗?