Laravel Blade用jQuery模板化

Question

I have a piece of code which adds AJAX fetched data to the accordion container, which looks now like this:

if (document.getElementById('accordion_' + id) == null) {
    $("#collapse_group_container").html(
        "<div class='panel-group active_subcategory_accordion' id='accordion_" + id + "' data-category-id='" + id + "' data-category-name='" + name + "'>" +
        "<div class='panel panel-primary'><div class='panel-heading'>" +
        "<h4 class='panel-title'>" +
        "<a data-toggle='collapse' data-parent='#accordion' href='#collapse_" + id + "'>" + name + "</a>" +
        "<a class='pull-right' style='display:block' onclick='deleteCollapseGroup(" + id + ")'>" +
        "X" +
        "</a></h4></div><div id='collapse_" + id + "' class='panel-collapse collapse in'>" +
        "<div class='panel-body'>" +
        "<div class='sk-circle'>" +
        "<div class='sk-circle1 sk-child'></div>" +
        "<div class='sk-circle2 sk-child'></div>" +
        "<div class='sk-circle3 sk-child'></div>" +
        "<div class='sk-circle4 sk-child'></div>" +
        "<div class='sk-circle5 sk-child'></div>" +
        "<div class='sk-circle6 sk-child'></div>" +
        "<div class='sk-circle7 sk-child'></div>" +
        "<div class='sk-circle8 sk-child'></div>" +
        "<div class='sk-circle9 sk-child'></div>" +
        "<div class='sk-circle10 sk-child'></div>" +
        "<div class='sk-circle11 sk-child'></div>" +
        "<div class='sk-circle12 sk-child'></div>" +
        "</div>" +
        "</div></div></div></div>"
    );
}

and although I think this may be complicating, the bigger issue I am facing is that I actually need to repeat that complete code on other place. I am wondering if it is possible to make something like this:

if (document.getElementById('accordion_' + id) == null) {
    $("#collapse_group_container").html(
        @include('partials/accordion', ['id' => id, 'name' => name])
    );
}

or similar, to make use of code reuse. I would like to include a file which has standard html formatting without quotes and pluses.

Answer 1

You can create a javascript function as a template:

var accordionTemplate = function(id, name) {
    // your code, returns html string
};

if (document.getElementById('accordion_' + id) == null) {
    $("#collapse_group_container").html(
        accordionTemplate(id, name)
    );
}