来自 Json 的短 HTML 代码将显示 HTML 代码而不是渲染版本

Question

我正在检索一个充满用户数据的数组。它们应该显示在 ul 中。其中一个字段是每个用户的前缀，如 html 代码这样 <span class="red-text">[Admin]</span>。但是当我尝试附加 li 元素时，它呈现 html 代码而不是 span 的红色版本。

我的json代码：

{
    "users":[
        {
            "id":"1",
            "usrname":"YannickFelix",
            "email":"example@gmail.com",
            "lvl":"4",
            "prefix":"<span class=\"red-text\">[Admin]<\/span>"
        }
    ]
}

还有我的javascript：

listElemTmplt = `
    <li class="collection-item avatar">
    <i class="material-icons circle {"{{color}}"}">person</i>
    <span class="title">{"{{usrname}}"}</span>
        <p>{"{{prefix}}"} {"{{usrname}}"} | {"{{email}}"}
        </p>
        <span class="secondary-content">
        <a class="waves-effect waves-circle" href="users.php?action=edit&uID={"{{id}}"}">
            <i class="material-icons grey-text text-darken-1">create</i>
        </a>
        <a class="waves-effect waves-circle waves-red modal-trigger" href="#modal{"{{id}}"}">
            <i class="material-icons grey-text text-darken-1">delete</i>
        </a>
    </span>
    <div id="modal{"{{id}}"}" class="modal">
        <div class="modal-content black-text">
            <h4>L&ouml;schen</h4>
            <p>M&ouml;chtest Du den Benutzer "{"{{usrname}}"}" wirklich l&ouml;schen?</p>
        </div>
        <div class="modal-footer">
            <a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat">Abbrechen</a>
            <a href="users.php?action=del&vID={"{{id}}"}" class="modal-action modal-close waves-effect waves-green btn-flat red-text">L&ouml;schen</a>
        </div>
    </div>
</li>
`;

template = Handlebars.compile(listElemTmplt);
finishedString = [];
$.getJSON("**url**", function (data) {
    console.log(data);
    $("ul#users").html("");
    data["users"].forEach(function (element, index, array) {
        html = template({"{"}id: element["id"], usrname: element["usrname"], email: element["email"], prefix: element["prefix"]{"}"});
        $("ul#users").append(html);
    });
});

列表中的示例项目。 [Admin] 应该是红色的并且没有 html 代码

Answer 1

Handlebars 会转义您在使用 {{prefix}} 时赋予它的值。当你想使用 raw HTML 时，你必须使用 {{{prefix}}} 来告诉它不要转义它。

来自 Json 的短 HTML 代码将显示 HTML 代码而不是渲染版本

Short HTML Code from Json will display the HTML code instead of the rendered version

html

javascript

jquery

json

handlebars.js