handlebars-lang / handlebars.js

Minimal templating on steroids.
http://handlebarsjs.com
MIT License
17.94k stars 2.04k forks source link

SafeString returning blank string #1474

Closed invious closed 4 years ago

invious commented 5 years ago

my helper function statusBadge is returning a blank string, instead of html

<script id="entry-template" type="text/x-handlebars-template">
    <div class="col-12 transfer-details">
        <div class="card w-75">
            <div class="card-body">
                <h5 class="card-title">{{statusBadge status}} Tickets transferred to {{recipient_first_name}} {{recipient_last_name}} ({{recipient_email}})</h5>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-3">
                            <div class="status-box">
                                <p class="card-content">
                                    <b>Invoice:</b> {{invoice_id}}<br>
                                    <b>Started:</b> {{prettyDate start_time}}<br>
                                    <b>Notes:</b> {{note}}
                                </p>

                            </div>
                        </div>
                        <div class="col">
                            <div class="col-4">
                                <div class="gallery js-flickity">
                                    <div class="gallery-cell">
                                        <div class="card">
                                            <img class="card-img ticket-card" src="img/ticket.svg" alt="Card image">
                                            <div class="card-img-overlay">
                                                <h5 class="card-title">Devils vs. Dallas Stars</h5>
                                                <p class="card-text">Prudential Center</p>
                                                <p class="card-text">101 4 3</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="gallery-cell">
                                        <div class="card">
                                            <img class="card-img ticket-card" src="img/ticket.svg" alt="Card image">
                                            <div class="card-img-overlay">
                                                <h5 class="card-title">Devils vs. Dallas Stars</h5>
                                                <p class="card-text">Prudential Center</p>
                                                <p class="card-text">101 4 3</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</script>
let transfer = {
        "id": 1939,
        "invoice_id": 7,
        "recipient_email": "sanchit@1ticket.com",
        "start_time": "2018-10-18T19:48:45",
        "status": "EMAILED",
        "note": "Test",
        "recipient_first_name": "Sanchit",
        "recipient_last_name": "Anand",
        "transfers": [
            {
                "id": 1939,
                "Email": "staples5@dtimanagement.com",
                "System_Type": "FlashSeats",
                "Subsystem": "",
                "status": "EMAILED",
                "error_message": null,
                "transfer_info": {
                    "output": {
                        "success": true,
                        "error_msg": "",
                        "transfer_msg": {
                            "Token": null,
                            "MobileId": null,
                            "ErrorCode": 0,
                            "StatusCode": "200",
                            "ToMemberId": 0,
                            "ErrorMessages": [],
                            "StatusDescription": "Successfully completed",
                            "TransferActionIds": [
                                9000000012296746
                            ]
                        }
                    }
                },
                "tickets": [
                    {
                        "uid": "staplescenter_1904061930_PR10_6_1_kingsvsvegasgoldenknights",
                        "section": "PR10",
                        "row": "6",
                        "seat": "1",
                        "local_date": "2019-04-06T19:30:00",
                        "venue": "STAPLES Center",
                        "event": "Kings vs Vegas Golden Knights",
                        "can_transfer": true
                    }
                ]
            }
        ]
    }

    Handlebars.registerHelper('prettyDate', function(date) {
        return moment.utc(date).tz("America/New_York").format("ll hh:mm:ss A");
    });

    Handlebars.registerHelper('statusBadge', function(s) {
        let status = s === 'EMAILED' ? 'success' : 'danger'
        return Handlebars.SafeString(`<span class="badge badge-${status}">${s}</span>`)
    });

    var source   = document.getElementById("entry-template").innerHTML;
    var template = Handlebars.compile(source);
    var html    = template(transfer);
nknapp commented 4 years ago

Closing due to inactivity. If you still need this, please create a minimal jsfiddle that reproduces the issue.