Request for Using Mustache.js instead of Handlebars

[shiroamada]

https://datatables.yajrabox.com/eloquent/row-details This page example is using Handlebars to complete it. However, I have an issue with the delimiters in Handlebars. It will break my VueJS.

Is it possible show another example using Mustache.js? It is because of Mustache able to switch the tags syntax.

Mustache.tags = ['<%=', '%>];

Looking forward for an example so I can apply in my project. Thanks!

• Operating System: Mac
• PHP Version: 7.1
• Laravel Version: 5.5
• Laravel-Datatables Version: 8.0

[shiroamada]

OK, Finally I manage to get it work. For those who want to use MustacheJS

1. include the Mustache JS CDN or you can download to your local file.

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

replace

    var template = Handlebars.compile($("#details-template").html());

to

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

in the datatables ajax function() replace

            row.child( template(row.data()) ).show();

to

            row.child( Mustache.render(template, row.data()) ).show();

In your Details Template (using Handlebars) , you may replace

<script id="details-template" type="text/x-handlebars-template">
    <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>

to

<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>