Question

尝试在我的网站中实现数据表行详细信息功能（https://datatables.yajrabox.com/eloquent/row-details） laravel 5.5.40 / Voyager模板（“tcg / voyager”：“^ 1.0”）/ Bootstrap 3.3.7应用程序我遇到了一个错误：

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 这是我需要的，如何附加它以及如何？

谢谢！

修改： googling之后我安装了

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 for DOM 操纵）：

我是复制文件/public/js/require.js(Prototype JavaScript framework，1.7.2版）并通过url https://gist.github.com/nornagon/284442

提交public / js / require.js文件

并在我的刀片模板中：

<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',
                    ...

有没有办法解决它？

我有要求没有定义错误

0 个答案: